Fixing more CSS, particularly around the widgets which involve toggling elements.

examples/theme_sandbox.py

@@ -363,8 +363,31 @@ class ChangingThemeApp(App[None]):
 
         yield Header(show_clock=True, icon="🐟")
         yield ThemeList(id="theme-list")
-        with VerticalScroll(id="widget-list") as container:
-            container.can_focus = False
+        with VerticalScroll(id="widget-list", can_focus=False) as container:
+            yield ToggleButton(label="Toggle Button")
+
+            yield SelectionList[int](
+                ("Falken's Maze", 0, True),
+                ("Black Jack", 1),
+                ("Gin Rummy", 2),
+                ("Hearts", 3),
+                ("Bridge", 4),
+                ("Checkers", 5),
+                ("Chess", 6, True),
+                ("Poker", 7),
+                ("Fighter Combat", 8, True),
+            )
+            yield RadioSet(
+                "Amanda",
+                "Connor MacLeod",
+                "Duncan MacLeod",
+                "Heather MacLeod",
+                "Joe Dawson",
+                "Kurgan, [bold italic red]The[/]",
+                "Methos",
+                "Rachel Ellenstein",
+                "Ramírez",
+            )
 
             yield Select(
                 [("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
@@ -460,35 +483,11 @@ class ChangingThemeApp(App[None]):
             )
 
             yield Switch()
-            yield ToggleButton(label="Toggle Button")
-
-            yield SelectionList[int](
-                ("Falken's Maze", 0, True),
-                ("Black Jack", 1),
-                ("Gin Rummy", 2),
-                ("Hearts", 3),
-                ("Bridge", 4),
-                ("Checkers", 5),
-                ("Chess", 6, True),
-                ("Poker", 7),
-                ("Fighter Combat", 8, True),
-            )
-            yield RadioSet(
-                "Amanda",
-                "Connor MacLeod",
-                "Duncan MacLeod",
-                "Heather MacLeod",
-                "Joe Dawson",
-                "Kurgan, [bold italic red]The[/]",
-                "Methos",
-                "Rachel Ellenstein",
-                "Ramírez",
-            )
 
         yield Footer()
 
     def on_mount(self) -> None:
-        self.theme = "textual-ansi"
+        self.theme = "textual-light"
         text_area = self.query_one(TextArea)
         text_area.selection = Selection((0, 0), (1, 10))
 

src/textual/widgets/_data_table.py

@@ -35,12 +35,8 @@ from textual.widget import PseudoClasses
 CellCacheKey: TypeAlias = (
     "tuple[RowKey, ColumnKey, Style, bool, bool, bool, int, PseudoClasses]"
 )
-LineCacheKey: TypeAlias = (
-    "tuple[int, int, int, int, Coordinate, Coordinate, Style, CursorType, bool, int, PseudoClasses]"
-)
-RowCacheKey: TypeAlias = (
-    "tuple[RowKey, int, Style, Coordinate, Coordinate, CursorType, bool, bool, int, PseudoClasses]"
-)
+LineCacheKey: TypeAlias = "tuple[int, int, int, int, Coordinate, Coordinate, Style, CursorType, bool, int, PseudoClasses]"
+RowCacheKey: TypeAlias = "tuple[RowKey, int, Style, Coordinate, Coordinate, CursorType, bool, bool, int, PseudoClasses]"
 CursorType = Literal["cell", "row", "column", "none"]
 """The valid types of cursors for [`DataTable.cursor_type`][textual.widgets.DataTable.cursor_type]."""
 CellType = TypeVar("CellType")
@@ -360,7 +356,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         }
 
         & > .datatable--fixed {
-            background: $secondary 50%;
+            background: $secondary-muted;
             color: $foreground;
         }
 

src/textual/widgets/_radio_set.py

@@ -39,7 +39,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
             padding: 0;
 
             & > .toggle--button {
-                color: $surface;
+                color: $panel-darken-1;
                 background: $panel;
             }
 
@@ -49,7 +49,7 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
         }
 
         & > RadioButton.-on .toggle--button {
-            color: $success;
+            color: $text-success;
         }
 
         &:focus {
@@ -58,17 +58,6 @@ class RadioSet(VerticalScroll, can_focus=True, can_focus_children=False):
             */
             border: tall $border;
             background-tint: $foreground 5%;
-
-            & > RadioButton {
-                & > .toggle--button {
-                    color: $surface;
-                    background: $panel-lighten-1;
-                }
-                &.-on > .toggle--button {
-                    color: $success;
-                }
-            }
-
             & > RadioButton.-selected {
                 color: $block-cursor-foreground;
                 text-style: $block-cursor-text-style;

src/textual/widgets/_selection_list.py

@@ -98,45 +98,25 @@ class SelectionList(Generic[SelectionType], OptionList):
         height: auto;
         
         & > .selection-list--button {
-            color: $surface-darken-1;
+            color: $panel-darken-1;
             background: $panel;
         }
 
         & > .selection-list--button-highlighted {
-            color: $surface-darken-1;
+            color: $panel-darken-1;
             background: $panel;
         }
 
         & > .selection-list--button-selected {
-            color: $success;
+            color: $text-success;
             background: $panel;
         }
 
         & > .selection-list--button-selected-highlighted {
-            color: $success;
+            color: $text-success;
             background: $panel;
         }
 
-        &:focus {
-            & > .selection-list--button {
-                background: $panel-lighten-1;
-            }
-
-            & > .selection-list--button-highlighted {
-                background: $panel-lighten-1;
-            }
-
-            & > .selection-list--button-selected {
-                color: $success;
-                background: $panel-lighten-1;
-            }
-
-            & > .selection-list--button-selected-highlighted {
-                color: $success;
-                background: $panel-lighten-1;
-            }
-        }
-
     }
     """
 

src/textual/widgets/_toggle_button.py

@@ -60,12 +60,12 @@ class ToggleButton(Static, can_focus=True):
         background: $surface;
 
         & > .toggle--button {
-            color: red;
+            color: $panel-darken-1;
             background: $panel;
         }
 
         &.-on > .toggle--button {
-            color: $success;
+            color: $text-success;
             background: $panel;
         }
 
@@ -77,18 +77,6 @@ class ToggleButton(Static, can_focus=True):
                 background: $block-cursor-background;
                 text-style: $block-cursor-text-style;
             }
-            & > .toggle--button {
-                background: $panel-lighten-1;
-            }
-            &.-on > .toggle--button {
-                background: $panel-lighten-1;
-            }
-            
-            &:hover {
-                & > .toggle--label {
-                    background: $block-cursor-background;
-                }
-            }
         }
 
         &:hover {
@@ -98,19 +86,6 @@ class ToggleButton(Static, can_focus=True):
         }
 
     }
-
-    /* Base button colors (including in dark themes). */
-
-    ToggleButton > .toggle--button {
-        text-style: $block-cursor-text-style;
-        background: $foreground 15%;
-    }
-
-
-    ToggleButton.-on:focus > .toggle--button {
-        background: $foreground 25%;
-    }
-
     """  # TODO: https://github.com/Textualize/textual/issues/1780
 
     BUTTON_LEFT: str = "▐"