Style review

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 
 - Breaking change: The `@on` decorator will now match a message class and any child classes https://github.com/Textualize/textual/pull/2746
+- Breaking change: Styles update to checkbox, radiobutton, OptionList, Select, SelectionList, Switch https://github.com/Textualize/textual/pull/2777
 
 ## [0.27.0] - 2023-06-01
 

docs/examples/widgets/checkbox.css

@@ -5,7 +5,6 @@ Screen {
 VerticalScroll {
     width: auto;
     height: auto;
-    border: solid $primary;
-    background: $panel;
+    background: $boost;
     padding: 2;
 }

docs/examples/widgets/option_list.css

@@ -3,8 +3,6 @@ Screen {
 }
 
 OptionList {
-    background: $panel;
-    border: round $primary;
     width: 70%;
-    height: 70%;
+    height: 80%;
 }

src/textual/pilot.py

@@ -26,7 +26,7 @@ def _get_mouse_message_arguments(
     control: bool = False,
 ) -> dict[str, Any]:
     """Get the arguments to pass into mouse messages for the click and hover methods."""
-    click_x, click_y, _, _ = target.region.translate(offset)
+    click_x, click_y = target.region.offset + offset
     message_arguments = {
         "x": click_x,
         "y": click_y,
@@ -134,6 +134,7 @@ async def hover(
         message_arguments = _get_mouse_message_arguments(
             target_widget, offset, button=0
         )
+        await self.pause()
         app.post_message(MouseMove(**message_arguments))
         await self.pause()
 

src/textual/widgets/_option_list.py

@@ -172,17 +172,24 @@ class OptionList(ScrollView, can_focus=True):
 
     DEFAULT_CSS = """
     OptionList {
-        background: $panel-lighten-1;
+        height: auto;
+        background: $boost;
         color: $text;
         overflow-x: hidden;
+        border: tall transparent;
+        padding: 0 1;
+    }
+
+    OptionList:focus {
+        border: tall $accent;
+
     }
 
     OptionList > .option-list--separator {
         color: $foreground 15%;
     }
 
     OptionList > .option-list--option-highlighted {
-        background: $accent 50%;
         color: $text;
         text-style: bold;
     }
@@ -197,11 +204,11 @@ class OptionList(ScrollView, can_focus=True):
 
     OptionList > .option-list--option-highlighted-disabled {
         color: $text-disabled;
-        background: $accent 30%;
+        background: $accent 20%;
     }
 
     OptionList:focus > .option-list--option-highlighted-disabled {
-        background: $accent 40%;
+        background: $accent 30%;
     }
 
     OptionList > .option-list--option-hover {
@@ -401,6 +408,7 @@ def _on_mouse_move(self, event: MouseMove) -> None:
         Args:
             event: The mouse movement event.
         """
+        print(event, event.style.meta)
         self._mouse_hovering_over = event.style.meta.get("option")
 
     def _on_leave(self, _: Leave) -> None:

src/textual/widgets/_radio_set.py

@@ -25,23 +25,27 @@ class RadioSet(Container, can_focus=True, can_focus_children=False):
 
     DEFAULT_CSS = """
     RadioSet {
-        border: round #666;
+        border: tall transparent;
+        background: $boost;
+        padding: 0 1 0 0;
         height: auto;
         width: auto;
     }
 
     RadioSet:focus {
-        border: round $accent;
-    }
-
-    App.-light-mode RadioSet {
-        border: round #CCC;
+        border: tall $accent;
     }
 
     /* The following rules/styles mimic similar ToggleButton:focus rules in
      * ToggleButton. If those styles ever get updated, these should be too.
      */
 
+    RadioSet > * {
+        background: transparent;
+        border: none;
+        padding: 0 1;
+    }
+
     RadioSet:focus > RadioButton.-selected > .toggle--label {
         text-style: underline;
     }

src/textual/widgets/_select.py

@@ -32,6 +32,9 @@ class SelectOverlay(OptionList):
         width: 100%;
         padding: 0 1;
     }
+    SelectOverlay:focus {
+        border: tall $background;
+    }
     SelectOverlay > .option-list--option {
         padding: 0 1;
     }
@@ -79,7 +82,7 @@ class SelectCurrent(Horizontal):
 
     DEFAULT_CSS = """
     SelectCurrent {
-        border: tall $background;
+        border: tall transparent;
         background: $boost;
         color: $text;
         width: 100%;

src/textual/widgets/_selection_list.py

@@ -93,6 +93,22 @@ class SelectionList(Generic[SelectionType], OptionList):
     """
 
     DEFAULT_CSS = """
+    SelectionList {
+        height: auto;
+    }
+
+    .-light-mode SelectionList:focus > .selection-list--button-selected {
+        color: $primary;
+    }
+
+    .-light-mode SelectionList > .selection-list--button-selected-highlighted {
+        color: $primary;
+    }
+
+    .-light-mode SelectionList:focus > .selection-list--button-selected-highlighted {
+        color: $primary;
+    }
+
     SelectionList > .selection-list--button {
         text-style: bold;
         background: $foreground 15%;
@@ -115,7 +131,6 @@ class SelectionList(Generic[SelectionType], OptionList):
 
     SelectionList > .selection-list--button-selected {
         text-style: bold;
-        background: $foreground 15%;
     }
 
     SelectionList:focus > .selection-list--button-selected {

src/textual/widgets/_switch.py

@@ -46,7 +46,7 @@ class Switch(Widget, can_focus=True):
     DEFAULT_CSS = """
     Switch {
         border: tall transparent;
-        background: $panel;
+        background: $boost;
         height: auto;
         width: auto;
         padding: 0 2;

src/textual/widgets/_toggle_button.py

@@ -54,6 +54,13 @@ class ToggleButton(Static, can_focus=True):
     DEFAULT_CSS = """
     ToggleButton {
         width: auto;
+        border: tall transparent;
+        padding: 0 1;
+        background: $boost;
+    }
+
+    ToggleButton:focus {
+        border: tall $accent;
     }
 
     ToggleButton:hover {

tests/option_list/test_option_list_mouse_hover.py

@@ -28,7 +28,7 @@ async def test_no_hover() -> None:
 async def test_hover_highlight() -> None:
     """The mouse hover value should react to the mouse hover over a highlighted option."""
     async with OptionListApp().run_test() as pilot:
-        await pilot.hover(OptionList)
+        await pilot.hover(OptionList, Offset(2, 1))
         option_list = pilot.app.query_one(OptionList)
         assert option_list._mouse_hovering_over == 0
         assert option_list._mouse_hovering_over == option_list.highlighted
@@ -37,7 +37,7 @@ async def test_hover_highlight() -> None:
 async def test_hover_no_highlight() -> None:
     """The mouse hover value should react to the mouse hover over a non-highlighted option."""
     async with OptionListApp().run_test() as pilot:
-        await pilot.hover(OptionList, Offset(1, 1))
+        await pilot.hover(OptionList, Offset(1, 1) + Offset(2, 1))
         option_list = pilot.app.query_one(OptionList)
         assert option_list._mouse_hovering_over == 1
         assert option_list._mouse_hovering_over != option_list.highlighted
@@ -46,7 +46,7 @@ async def test_hover_no_highlight() -> None:
 async def test_hover_disabled() -> None:
     """The mouse hover value should react to the mouse hover over a disabled option."""
     async with OptionListApp().run_test() as pilot:
-        await pilot.hover(OptionList, Offset(1, 3))
+        await pilot.hover(OptionList, Offset(1, 3) + Offset(2, 1))
         option_list = pilot.app.query_one(OptionList)
         assert option_list._mouse_hovering_over == 3
         assert option_list.get_option_at_index(
@@ -58,7 +58,7 @@ async def test_hover_disabled() -> None:
 async def test_hover_then_leave() -> None:
     """After a mouse has been over an OptionList and left _mouse_hovering_over should be None again."""
     async with OptionListApp().run_test() as pilot:
-        await pilot.hover(OptionList)
+        await pilot.hover(OptionList, Offset(2, 1))
         option_list = pilot.app.query_one(OptionList)
         assert option_list._mouse_hovering_over == 0
         await pilot.hover(Label)

tests/option_list/test_option_messages.py

@@ -105,7 +105,7 @@ async def test_click_option_with_mouse() -> None:
     """Clicking on an option via the mouse should result in highlight and select messages."""
     async with OptionListApp().run_test() as pilot:
         assert isinstance(pilot.app, OptionListApp)
-        await pilot.click(OptionList, Offset(1, 1))
+        await pilot.click(OptionList, Offset(2, 2))
         assert pilot.app.messages[1:] == [
             ("OptionHighlighted", "1", 1),
             ("OptionSelected", "1", 1),