Tree styling

Author: darrenburns

src/textual/design.py

@@ -213,8 +213,6 @@ def luminosity_range(spread: float) -> Iterable[tuple[str, float]]:
         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 / 2.5).hex
 
         return colors

src/textual/widgets/_select.py

@@ -115,6 +115,11 @@ class SelectCurrent(Horizontal):
         height: auto;
         padding: 0 2;
 
+        &:ansi {
+            color: ansi_default;
+            background: ansi_default;
+        }
+
         Static#label {
             width: 1fr;
             height: auto;
@@ -211,6 +216,15 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
         height: auto;
         background: $surface;
         border: tall $border-blurred;
+        
+        .up-arrow {
+            display: none;
+        }
+
+        &:focus {
+            background: $surface-active;
+            border: tall $border;
+        }
 
         & > SelectOverlay {
             width: 1fr;
@@ -227,26 +241,20 @@ class Select(Generic[SelectType], Vertical, can_focus=True):
             }
         }
 
-        &:focus {
-            background: $surface-active;
-            border: tall $border;
-        }
-
-        .up-arrow {
-            display: none;
-        }
+        &.-expanded {
+            .down-arrow {
+                display: none;
+            }
 
-        &.-expanded .down-arrow {
-            display: none;
-        }
+            .up-arrow {
+                display: block;
+            }
 
-        &.-expanded .up-arrow {
-            display: block;
+            & > SelectOverlay {
+                display: block;
+            }
         }
 
-        &.-expanded > SelectOverlay {
-            display: block;
-        }
     }
 
     """

src/textual/widgets/_tree.py

@@ -588,13 +588,13 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
 
         }
         & > .tree--guides {
-            color: $surface-lighten-1;
+            color: $surface-lighten-2;
         }
         & > .tree--guides-hover {
-            color: $surface-lighten-1;
+            color: $surface-lighten-2;
         }
         & > .tree--guides-selected {
-            color: $primary;
+            color: $highlight-cursor-blurred;
         }
         & > .tree--cursor {
             background: $highlight-cursor-blurred;
@@ -603,19 +603,22 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
         & > .tree--highlight {
         }
         & > .tree--highlight-line {
-            background: $boost;
+            background: $highlight-hover;
         }
 
         &:focus {
             background: $surface-active;
             & > .tree--cursor {
                 background: $highlight-cursor;
             }
+            & > .tree--guides {
+                color: $surface-lighten-3;
+            }
             & > .tree--guides-hover {
-                color: $surface-lighten-2;
+                color: $surface-lighten-3;
             }
             & > .tree--guides-selected {
-                color: $surface-lighten-2;
+                color: $highlight-cursor;
             }
         }