Ansi theme related changes

examples/theme_sandbox.py

@@ -486,7 +486,7 @@ class ChangingThemeApp(App[None]):
         yield Footer()
 
     def on_mount(self) -> None:
-        self.theme = "nord"
+        self.theme = "textual-ansi"
         text_area = self.query_one(TextArea)
         text_area.selection = Selection((0, 0), (1, 10))
 

src/textual/design.py

@@ -242,7 +242,7 @@ class ColorSystem:
         colors["block-cursor-background"] = get("block-cursor-background", primary.hex)
         colors["block-cursor-text-style"] = get("block-cursor-text-style", "bold")
         colors["block-cursor-blurred-foreground"] = get(
-            "block-cursor-blurred-foreground", colors["text"]
+            "block-cursor-blurred-foreground", foreground.hex
         )
         colors["block-cursor-blurred-background"] = get(
             "block-cursor-blurred-background", primary.with_alpha(0.3).hex

src/textual/theme.py

@@ -151,21 +151,31 @@ BUILTIN_THEMES: dict[str, Theme] = {
             "button-color-foreground": "#181825",
         },
     ),
-    # "textual-ansi": Theme(
-    #     name="textual-ansi",
-    #     primary="ansi_blue",
-    #     secondary="ansi_cyan",
-    #     warning="ansi_yellow",
-    #     error="ansi_red",
-    #     success="ansi_green",
-    #     accent="ansi_bright_blue",
-    #     foreground="ansi_default",
-    #     background="ansi_default",
-    #     surface="ansi_default",
-    #     panel="ansi_default",
-    #     boost="ansi_default",
-    #     dark=False,
-    # ),
+    "textual-ansi": Theme(
+        name="textual-ansi",
+        primary="ansi_blue",
+        secondary="ansi_cyan",
+        warning="ansi_yellow",
+        error="ansi_red",
+        success="ansi_green",
+        accent="ansi_bright_blue",
+        foreground="ansi_default",
+        background="ansi_default",
+        surface="ansi_default",
+        panel="ansi_default",
+        boost="ansi_default",
+        dark=False,
+        variables={
+            "block-cursor-text-style": "b",
+            "block-cursor-blurred-text-style": "i",
+            "input-selection-background": "ansi_blue",
+            "input-selection-foreground": "ansi_white",
+            "input-cursor-text-style": "reverse",
+            "scrollbar": "ansi_blue",
+            "border-blurred": "ansi_blue",
+            "border": "ansi_bright_blue",
+        },
+    ),
     "dracula": Theme(
         name="dracula",
         primary="#BD93F9",
@@ -292,6 +302,7 @@ class ThemeProvider(Provider):
         return [
             (theme.name, partial(set_app_theme, theme.name))
             for theme in themes.values()
+            if theme.name != "textual-ansi"
         ]
 
     async def discover(self) -> Hits:

src/textual/widgets/_collapsible.py

@@ -21,16 +21,19 @@ class CollapsibleTitle(Static, can_focus=True):
         width: auto;
         height: auto;
         padding: 0 1 0 1;
-    }
+        text-style: $block-cursor-blurred-text-style;
+        background: $block-cursor-blurred-background;
+        color: $block-cursor-blurred-foreground;
 
-    CollapsibleTitle:hover {
-        background: $block-hover-background;
-        color: $foreground;
-    }
-
-    CollapsibleTitle:focus {
-        background: $block-cursor-background;
-        color: $block-cursor-foreground;
+        &:hover {
+            background: $block-hover-background;
+            color: $foreground;
+        }
+        &:focus {
+            text-style: $block-cursor-text-style;
+            background: $block-cursor-background;
+            color: $block-cursor-foreground;
+        }
     }
     """
 

src/textual/widgets/_data_table.py

@@ -345,6 +345,10 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
             background: $panel;
             color: $foreground;
         }
+        &:ansi > .datatable--header {
+            background: ansi_bright_blue;
+            color: ansi_default;
+        }
 
         & > .datatable--fixed {
             background: $secondary 50%;

src/textual/widgets/_footer.py

@@ -143,7 +143,7 @@ class Footer(ScrollableContainer, can_focus=False, can_focus_children=False):
             border-left: vkey $foreground 20%;                            
         }
 
-        &.-ansi-colors {           
+        &:ansi {           
             background: ansi_default;            
             .footer-key--key {
                 background: ansi_default;

src/textual/widgets/_input.py

@@ -160,6 +160,7 @@ class Input(Widget, can_focus=True):
         &>.input--cursor {
             background: $input-cursor-background;
             color: $input-cursor-foreground;
+            text-style: $input-cursor-text-style;
         }
         &>.input--placeholder, &>.input--suggestion {
             color: $text-disabled;
@@ -171,16 +172,10 @@ class Input(Widget, can_focus=True):
             border: tall $error;
         }    
 
-        &.-ansi-colors {
+        &:ansi {
             background: ansi_default;
             color: ansi_default;
-            border: tall ansi_default;
-
-            &:focus {
-                border: tall ansi_blue;
-            }
             &>.input--cursor {     
-                background: ansi_default;           
                 text-style: reverse;
             }
             &>.input--placeholder, &>.input--suggestion {

src/textual/widgets/_list_view.py

@@ -38,9 +38,10 @@ class ListView(VerticalScroll, can_focus=True, can_focus_children=False):
             overflow: hidden hidden;
             width: 1fr;
             
-            &.--highlight {
-                color: $block-cursor-foreground;
+            &.--highlight > Widget {
+                color: $block-cursor-blurred-foreground;
                 background: $block-cursor-blurred-background;
+                text-style: $block-cursor-blurred-text-style;
             }
         }
 

src/textual/widgets/_option_list.py

@@ -144,6 +144,14 @@ class OptionList(ScrollView, can_focus=True):
         border: tall transparent;
         padding: 0 1;
         background: $surface;
+        &:ansi {
+            border: tall $border-blurred;
+        }
+        & > .option-list--option-highlighted {
+            color: $block-cursor-blurred-foreground;
+            background: $block-cursor-blurred-background;
+            text-style: $block-cursor-blurred-text-style;
+        }
         &:focus {
             border: tall $border;
             background-tint: $foreground 5%;

src/textual/widgets/_select.py

@@ -102,6 +102,7 @@ class SelectCurrent(Horizontal):
         padding: 0 2;
 
         &:ansi {
+            border: tall ansi_blue;
             color: ansi_default;
             background: ansi_default;
         }

src/textual/widgets/_tabs.py

@@ -34,6 +34,9 @@ class Underline(Widget):
             color: $block-cursor-background;
             background: $foreground 10%;
         }
+        &:ansi {
+            text-style: dim;
+        }
     }
     """
 
@@ -224,6 +227,27 @@ class Tabs(Widget, can_focus=True):
             min-width: 100%;
             overflow: hidden hidden;
         }
+        &:ansi {
+            #tabs-list {
+                text-style: dim;
+            }
+            & #tabs-list > .-active {
+                text-style: not dim;
+            }
+            &:focus {
+                #tabs-list > .-active {
+                    text-style: bold not dim;
+                }
+            }
+            & .underline--bar {
+                color: ansi_bright_blue;
+                background: ansi_default;
+            }
+            & .-active {
+                color: transparent;
+                background: transparent;
+            }
+        }
     }
     """
 

src/textual/widgets/_text_area.py

@@ -95,6 +95,9 @@ TextArea {
     padding: 0 1;
     color: $foreground;
     background: $surface;
+    & .text-area--cursor {
+        text-style: $input-cursor-text-style;
+    }
     & .text-area--gutter {
         color: $foreground 40%;
     }
@@ -121,6 +124,13 @@ TextArea {
         border: tall $border;
     }
 
+    &:ansi {
+        & .text-area--selection {
+            background: transparent;
+            text-style: reverse;
+        }
+    }
+
     &:dark {
         .text-area--cursor {
             color: $input-cursor-foreground;

src/textual/widgets/_tree.py

@@ -584,9 +584,7 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
         background: $surface;
         color: $foreground;
 
-        & > .tree--label {
-
-        }
+        & > .tree--label {}
         & > .tree--guides {
             color: $surface-lighten-2;
         }
@@ -597,10 +595,10 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
             color: $block-cursor-blurred-background;
         }
         & > .tree--cursor {
+            text-style: $block-cursor-blurred-text-style;
             background: $block-cursor-blurred-background;
         }
-        & > .tree--highlight {
-        }
+        & > .tree--highlight {}
         & > .tree--highlight-line {
             background: $block-hover-background;
         }
@@ -636,38 +634,14 @@ class Tree(Generic[TreeDataType], ScrollView, can_focus=True):
             }
         }
 
-        &.-ansi {
-            background: ansi_default;
+        &:ansi {
             color: ansi_default;
             & > .tree--guides {
                 color: ansi_green;
             }
-            & > .tree--guides-hover {
-                color: ansi_blue;
-            
-            }
-            & > .tree--guides-selected {
-                color: ansi_bright_blue;
-             
-            }
-            & > .tree--cursor {
-                background: ansi_bright_blue;
-                color: ansi_default;
-                text-style: none;
-            }
             &:nocolor > .tree--cursor{
                 text-style: reverse;
             }
-            &:focus > .tree--cursor {
-                background: ansi_bright_blue;
-            }
-            & > .tree--highlight {
-                text-style: underline;
-            }
-            & > .tree--highlight-line {
-                background: ansi_default;
-            }
-
         }
     }