Merge branch 'main' into fix-tabs-update-highlighting-when-tab-removed

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 
 - Fixed duplicated key displays in the help panel https://github.com/Textualize/textual/issues/5037
+- Fixed `TextArea` mouse selection with tab characters https://github.com/Textualize/textual/issues/5212
 - Fixed `Tabs` not updating the highlighting after removing a tab https://github.com/Textualize/textual/issues/5218
 
 ### Added

docs/guide/design.md

@@ -138,7 +138,7 @@ For example, `$secondary-darken-1` is a slightly darkened `$secondary`, and `$er
 
 ## Light and dark themes
 
-Themes can be either "light" or "dark".
+Themes can be either *light* or *dark*.
 This setting is specified in the `Theme` constructor via the `dark` argument, and influences how Textual
 generates variables.
 Built-in widgets may also use the value of `dark` to influence their appearance.

examples/theme_sandbox.py

@@ -302,7 +302,7 @@ def action_invalid_theme(self) -> None:
         self.theme = "not-a-theme"
 
     def action_widget_search(self) -> None:
-        self.search(
+        self.search_commands(
             [
                 (
                     widget.__class__.__name__,
@@ -363,8 +363,31 @@ def compose(self) -> ComposeResult:
 
         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 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 Select(
                 [("foo", "foo"), ("bar", "bar"), ("baz", "baz"), ("qux", "qux")]
@@ -459,36 +482,10 @@ def compose(self) -> ComposeResult:
                 "Virgon",
             )
 
-            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/app.py

@@ -768,6 +768,9 @@ def __init__(
         self._css_update_count: int = 0
         """Incremented when CSS is invalidated."""
 
+        self.theme_variables: dict[str, str] = {}
+        """Variables generated from the current theme."""
+
         if self.ENABLE_COMMAND_PALETTE:
             for _key, binding in self._bindings:
                 if binding.action in {"command_palette", "app.command_palette"}:
@@ -1180,7 +1183,10 @@ def get_css_variables(self) -> dict[str, str]:
         # Apply the additional variables from the theme
         variables = {**variables, **(theme.variables)}
         theme_variables = self.get_theme_variable_defaults()
-        return {**theme_variables, **variables}
+
+        combined_variables = {**theme_variables, **variables}
+        self.theme_variables = combined_variables
+        return combined_variables
 
     def get_theme(self, theme_name: str) -> Theme | None:
         """Get a theme by name.
@@ -1662,7 +1668,7 @@ def deliver_screenshot(
             name="screenshot",
         )
 
-    def search(
+    def search_commands(
         self,
         commands: Sequence[CommandListItem],
         placeholder: str = "Search for commands…",
@@ -1671,6 +1677,7 @@ def search(
 
         Args:
             commands: A list of SimpleCommand instances.
+            placeholder: Placeholder text for the search field.
 
         Returns:
             AwaitMount: An awaitable that resolves when the commands are shown.

src/textual/command.py

@@ -570,7 +570,7 @@ class CommandPalette(SystemModalScreen[None]):
         margin-top: 3; 
         height: 100%;
         visibility: hidden;
-        background: $panel-darken-1;
+        background: $surface;
     }
 
     CommandPalette #--input {

src/textual/document/_wrapped_document.py

@@ -295,7 +295,9 @@ def offset_to_location(self, offset: Offset) -> Location:
         if not self._width:
             # No wrapping, so we directly map offset to location and clamp.
             line_index = min(y, len(self._wrap_offsets) - 1)
-            column_index = min(x, len(self.document.get_line(line_index)))
+            column_index = cell_width_to_column_index(
+                self.document.get_line(line_index), x, self._tab_width
+            )
             return line_index, column_index
 
         # Find the line corresponding to the given y offset in the wrapped document.

src/textual/drivers/linux_driver.py

@@ -267,8 +267,6 @@ def on_terminal_resize(signum, stack) -> None:
         self.write("\x1b[?25l")  # Hide cursor
         self.write("\x1b[?1004h")  # Enable FocusIn/FocusOut.
         self.write("\x1b[>1u")  # https://sw.kovidgoyal.net/kitty/keyboard-protocol/
-        # Disambiguate escape codes https://sw.kovidgoyal.net/kitty/keyboard-protocol/#progressive-enhancement
-        self.write("\x1b[=1;u")
 
         self.flush()
         self._key_thread = Thread(target=self._run_input_thread)

src/textual/theme.py

@@ -72,7 +72,6 @@ def to_color_system(self) -> ColorSystem:
         error="#ba3c5b",
         success="#4EBF71",
         foreground="#e0e0e0",
-        dark=True,
     ),
     "textual-light": Theme(
         name="textual-light",
@@ -82,7 +81,13 @@ def to_color_system(self) -> ColorSystem:
         warning="#ffa62b",
         error="#ba3c5b",
         success="#4EBF71",
+        surface="#D8D8D8",
+        panel="#D0D0D0",
+        background="#E0E0E0",
         dark=False,
+        variables={
+            "footer-key-foreground": "#0178D4",
+        },
     ),
     "nord": Theme(
         name="nord",
@@ -96,7 +101,6 @@ def to_color_system(self) -> ColorSystem:
         error="#BF616A",
         surface="#3B4252",
         panel="#434C5E",
-        dark=True,
         variables={
             "block-cursor-background": "#88C0D0",
             "block-cursor-foreground": "#2E3440",
@@ -119,7 +123,6 @@ def to_color_system(self) -> ColorSystem:
         background="#282828",
         surface="#3c3836",
         panel="#504945",
-        dark=True,
         variables={
             "block-cursor-foreground": "#fbf1c7",
             "input-selection-background": "#689d6a40",
@@ -138,7 +141,6 @@ def to_color_system(self) -> ColorSystem:
         background="#181825",
         surface="#313244",
         panel="#45475a",
-        dark=True,
         variables={
             "input-cursor-foreground": "#11111b",
             "input-cursor-background": "#f5e0dc",
@@ -188,7 +190,6 @@ def to_color_system(self) -> ColorSystem:
         surface="#2B2E3B",
         panel="#313442",
         foreground="#F8F8F2",
-        dark=True,
         variables={
             "button-color-foreground": "#282A36",
         },
@@ -205,7 +206,6 @@ def to_color_system(self) -> ColorSystem:
         background="#1A1B26",  # Background
         surface="#24283B",  # Surface
         panel="#414868",  # Panel
-        dark=True,
         variables={
             "button-color-foreground": "#24283B",
         },
@@ -222,7 +222,6 @@ def to_color_system(self) -> ColorSystem:
         background="#272822",
         surface="#2e2e2e",
         panel="#3E3D32",
-        dark=True,
         variables={
             "foreground-muted": "#797979",
             "input-selection-background": "#575b6190",
@@ -241,7 +240,6 @@ def to_color_system(self) -> ColorSystem:
         surface="#1C1B1A",  # base.950
         panel="#282726",  # base.900
         foreground="#FFFCF0",  # base.paper
-        dark=True,
         variables={
             "input-cursor-foreground": "#5E409D",
             "input-cursor-background": "#FFFCF0",

src/textual/widgets/_data_table.py

@@ -360,7 +360,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
         }
 
         & > .datatable--fixed {
-            background: $secondary 50%;
+            background: $secondary-muted;
             color: $foreground;
         }
 

src/textual/widgets/_option_list.py

@@ -146,10 +146,9 @@ class OptionList(ScrollView, can_focus=True):
         max-height: 100%;
         color: $foreground;
         overflow-x: hidden;
-        border: tall transparent;
+        border: tall $border-blurred;
         padding: 0 1;
         background: $surface;
-
         & > .option-list--option-highlighted {
             color: $block-cursor-blurred-foreground;
             background: $block-cursor-blurred-background;

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-2;
                 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/_select.py

@@ -94,7 +94,7 @@ class SelectCurrent(Horizontal):
 
     DEFAULT_CSS = """
     SelectCurrent {
-        border: tall transparent;
+        border: tall $border-blurred;
         color: $foreground;
         background: $surface;
         width: 1fr;

src/textual/widgets/_selection_list.py

@@ -98,60 +98,25 @@ class SelectionList(Generic[SelectionType], OptionList):
         height: auto;
         
         & > .selection-list--button {
-            color: $surface-darken-1;
+            color: $panel-darken-2;
             background: $panel;
         }
 
         & > .selection-list--button-highlighted {
-            color: $surface-darken-1;
+            color: $panel-darken-2;
             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;
         }
 
-        &:light {
-            & > .selection-list--button-selected-highlighted {
-                color: $success;
-            }
-
-            &:focus {
-                & > .selection-list--button-selected {
-                    color: $success-darken-1;
-                }
-                & > .selection-list--button-selected-highlighted {
-                    color: $success-darken-1;
-                }
-            }
-        }
-
-        &: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;
-            }
-        }
-
     }
     """