Consistency

Author: darrenburns

src/textual/design.py

@@ -13,9 +13,14 @@
 NUMBER_OF_SHADES = 3
 
 # Where no content exists
-DEFAULT_DARK_BACKGROUND = "#121212"
+DEFAULT_DARK_BACKGROUND = "#1e1e1e"
 # What text usually goes on top off
-DEFAULT_DARK_SURFACE = "#1e1e1e"
+DEFAULT_DARK_SURFACE = "#232323"
+# TODO - update this
+# # Where no content exists
+# DEFAULT_DARK_BACKGROUND = "#121212"
+# # What text usually goes on top off
+# DEFAULT_DARK_SURFACE = "#1e1e1e"
 
 DEFAULT_LIGHT_SURFACE = "#f5f5f5"
 DEFAULT_LIGHT_BACKGROUND = "#efefef"
@@ -193,7 +198,7 @@ def luminosity_range(spread) -> Iterable[tuple[str, float]]:
         # The cursor color for widgets such as OptionList, DataTable, etc.
         colors["cursor"] = accent.hex
         # The cursor should dim when the widget is blurred.
-        colors["cursor-blurred"] = accent.with_alpha(0.4).hex
+        colors["cursor-blurred"] = accent.with_alpha(0.3).hex
 
         # The border color for focused widgets which have a border.
         colors["border"] = accent.hex

src/textual/screen.py

@@ -150,7 +150,7 @@ class Screen(Generic[ScreenResultType], Widget):
     
         layout: vertical;
         overflow-y: auto;
-        background: $surface;        
+        background: $background;        
         
         &:inline {
             height: auto;

src/textual/widget.py

@@ -280,8 +280,8 @@ class Widget(DOMNode):
         scrollbar-background-hover: $panel-darken-2;
         scrollbar-background-active: $panel-darken-3;
         scrollbar-color: $primary-lighten-1;
-        scrollbar-color-active: $warning-darken-1;
-        scrollbar-color-hover: $primary-lighten-1;
+        scrollbar-color-active: $secondary;
+        scrollbar-color-hover: $primary-lighten-2;
         scrollbar-corner-color: $panel-darken-1;
         scrollbar-size-vertical: 2;
         scrollbar-size-horizontal: 1;

src/textual/widgets/_data_table.py

@@ -314,17 +314,14 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
     """
 
     DEFAULT_CSS = """
-    DataTable:dark {
-        background: initial;
-    }
     DataTable {
-        background: $surface ;
+        background: $surface;
         color: $text;
         height: auto;
         max-height: 100%;
 
         &:dark {
-            background: initial;
+            background: $surface;
             & > .datatable--even-row {
                 background: $primary 15%;
             }

src/textual/widgets/_input.py

@@ -146,7 +146,7 @@ class Input(Widget, can_focus=True):
 
     DEFAULT_CSS = """
     Input {
-        background: $boost;
+        background: $surface;
         color: $text;
         padding: 0 2;
         border: tall $border-blurred;

src/textual/widgets/_list_item.py

@@ -16,29 +16,22 @@ class ListItem(Widget, can_focus=False):
     documentation for more details on use.
     """
 
-    SCOPED_CSS = False
-
     DEFAULT_CSS = """
     ListItem {
         color: $text;
         height: auto;
-        background: $background;
         overflow: hidden hidden;
-    }
-    ListItem > :disabled {
-        background: $background;
-    }
-    ListItem > Widget :hover {
-        background: $hover;
-    }
-    ListView > ListItem.--highlight {
-        background: $cursor-blurred;
-    }
-    ListView:focus > ListItem.--highlight {
-        background: $cursor;
-    }
-    ListItem > Widget {
-        height: auto;
+        background: $surface;
+
+        & > :disabled {
+            background: $background;
+        }
+        & > Widget {
+            height: auto;
+            & :hover {
+                background: $hover;
+            }
+        }
     }
     """
 

src/textual/widgets/_list_view.py

@@ -25,6 +25,18 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
         index: The index in the list that's currently highlighted.
     """
 
+    DEFAULT_CSS = """
+    ListView {
+        background: transparent;
+        & > ListItem.--highlight {
+            background: $cursor-blurred;
+        }
+        &:focus > ListItem.--highlight {
+            background: $cursor;
+        }
+    }
+    """
+
     BINDINGS: ClassVar[list[BindingType]] = [
         Binding("enter", "select_cursor", "Select", show=False),
         Binding("up", "cursor_up", "Cursor up", show=False),

src/textual/widgets/_option_list.py

@@ -143,6 +143,7 @@ class OptionList(ScrollView, can_focus=True):
         overflow-x: hidden;
         border: tall transparent;
         padding: 0 1;
+        background: $surface    ;
     }
 
     OptionList:focus {
@@ -155,7 +156,7 @@ class OptionList(ScrollView, can_focus=True):
 
     OptionList > .option-list--option-highlighted {
         color: $text;
-        text-style: bold;
+        background: $cursor-blurred;
     }
 
     OptionList:focus > .option-list--option-highlighted {
@@ -173,13 +174,11 @@ class OptionList(ScrollView, can_focus=True):
     OptionList > .option-list--option-hover-highlighted {
         background: $accent 60%;
         color: $text;
-        text-style: bold;
     }
 
     OptionList:focus > .option-list--option-hover-highlighted {
         background: $accent;
         color: $text;
-        text-style: bold;
     }
     """
 

src/textual/widgets/_text_area.py

@@ -93,7 +93,7 @@ class TextArea(ScrollView):
     height: 1fr;
     border: tall $background;
     padding: 0 1;
-
+    background: $surface;
     & .text-area--gutter {
         color: $text 40%;
     }