text color

examples/calculator.css

@@ -24,7 +24,7 @@ Button {
     padding: 0 1;
     height: 100%;
     background: $primary-lighten-2;
-    color: $text-primary-lighten-2;
+    color: $text;
 }
 
 #number-0 {

examples/code_browser.css

@@ -1,3 +1,7 @@
+Screen {
+    background: $surface-darken-1;
+}
+
 #tree-view {
     display: none;
     scrollbar-gutter: stable;
@@ -9,7 +13,7 @@ CodeBrowser.-show-tree #tree-view {
     dock: left;
     height: 100%;            
     max-width: 50%;
-    background: $surface;     
+    background: $surface;    
 }
 
 CodeBrowser{
@@ -17,8 +21,7 @@ CodeBrowser{
 }
 
 DirectoryTree {
-    padding-right: 1;
+    padding-right: 1;   
-   
 }
 
 #code {

examples/code_browser.py

@@ -42,10 +42,10 @@ class CodeBrowser(App):
                 line_numbers=True,
                 word_wrap=True,
                 indent_guides=True,
-                theme="monokai",
+                theme="github-dark",
             )
         except Exception:
-            code_view.update(Traceback(theme="monokai", width=None))
+            code_view.update(Traceback(theme="github-dark", width=None))
             self.sub_title = "ERROR"
         else:
             code_view.update(syntax)

sandbox/will/basic.css

@@ -14,16 +14,11 @@
 
 App > Screen {
 
-  background: $surface;
-  color: $text-surface;
-  layers: base sidebar;
-
-  color: $text-background;
   background: $background;
+  color: $text;
+  layers: base sidebar;  
   layout: vertical;
-
   overflow: hidden;
-
 }
 
 #tree-container {
@@ -52,9 +47,9 @@ DataTable {
   height: 24;
 }
 
-#sidebar {
+#sidebar {  
-  color: $text-panel;
   background: $panel;
+  color: $text;
   dock: left;
   width: 30;
   margin-bottom: 1;
@@ -71,7 +66,7 @@ DataTable {
 #sidebar .title {
   height: 1;
   background: $primary-background-darken-1;
-  color: $text-primary-background-darken-1;
+  color: $text;
   border-right: wide $background;
   content-align: center middle;
 }
@@ -79,14 +74,14 @@ DataTable {
 #sidebar .user {
   height: 8;
   background: $panel-darken-1;
-  color: $text-panel-darken-1;
+  color: $text;
   border-right: wide $background;
   content-align: center middle;
 }
 
 #sidebar .content {
   background: $panel-darken-2;
-  color: $text-surface;
+  color: $text;
   border-right: wide $background;
   content-align: center middle;
 }
@@ -101,7 +96,7 @@ Tweet {
 
   margin:0 2;
   background: $panel;
-  color: $text-panel;
+  color: $text;
   layout: vertical;
   /* border: outer $primary; */
   padding: 1;
@@ -132,13 +127,13 @@ Tweet {
 TweetHeader {
   height:1;
   background: $accent;
-  color: $text-accent
+  color: $text;
 }
 
 TweetBody {
   width: 100%;
   background: $panel;
-  color: $text-panel;
+  color: $text;
   height: auto;
   padding: 0 1 0 0;
 }
@@ -149,7 +144,7 @@ Tweet.scroll-horizontal TweetBody {
 
 .button {
   background: $accent;
-  color: $text-accent;
+  color: $text;
   width:20;
   height: 3;
   /* border-top: hidden  $accent-darken-3;  */
@@ -165,7 +160,7 @@ Tweet.scroll-horizontal TweetBody {
 
 .button:hover {
   background: $accent-lighten-1;
-  color: $text-accent-lighten-1;
+  color: $text;
   width: 20;
   height: 3;
   border: tall $accent-darken-1;
@@ -177,7 +172,7 @@ Tweet.scroll-horizontal TweetBody {
 }
 
 #footer {
-  color: $text-accent;
+  color: $text;
   background: $accent;
   height: 1;
 
@@ -200,7 +195,7 @@ OptionItem {
 
 OptionItem:hover {
   height: 3;
-  color: $text-primary;
+  color: $text;
   background: $primary-darken-1;
   /* border-top: hkey $accent2-darken-3;
   border-bottom: hkey $accent2-darken-3; */
@@ -212,7 +207,7 @@ Error {
   width: 100%;
   height:3;
   background: $error;
-  color: $text-error;
+  color: $text;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
 
@@ -225,7 +220,7 @@ Warning {
   width: 100%;
   height:3;
   background: $warning;
-  color: $text-warning-fade-1;
+  color: $text;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
 
@@ -239,7 +234,7 @@ Success {
   height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;
+  color: $text;
 
   border-top: hkey $success-darken-2;
   border-bottom: hkey $success-darken-2;

sandbox/will/calculator.css

@@ -24,7 +24,7 @@ Button {
     padding: 0 1;
     height: 100%;
     background: $primary-lighten-2;
-    color: $text-primary-lighten-2;
+    color: $text;
 }
 
 #number-0 {

sandbox/will/center2.py

@@ -33,7 +33,7 @@ class CenterApp(App):
 
     Static {        
         background: $panel;
-        color: $text-panel;
+        color: $text;
         content-align: center middle;
     }
     

sandbox/will/design.css

@@ -1,19 +1,22 @@
+Screen {
+    background: $surface;
+}
+
 Container {
     height: auto;
-    background: $surface;
+    background: $boost;
-    margin: 1 2;
+    
-  
 }
 
 Panel {
     height: auto;
-    background: $surface;
+    background: $boost;
     margin: 1 2;
-    padding: 1 2;
+
 }
 
 Content {
-    background: $surface;
+    background: $boost;
     padding: 1 2;
     margin: 1 2;
     color: auto 95%;

sandbox/will/design.py

@@ -21,14 +21,13 @@ class DesignApp(App):
     def compose(self):
         yield Header()
         yield Footer()
-        yield Panel(
+        yield Container(
             Content("content"),
             Panel(
                 Content("more content"),
                 Content("more content"),
             ),
         )
-        yield Panel(Static("Hello World"))
 
 
 app = DesignApp(css_path="design.css")

src/textual/_styles_cache.py

@@ -250,7 +250,7 @@ class StylesCache:
         line: Iterable[Segment]
         # Draw top or bottom borders (A)
         if (border_top and y == 0) or (border_bottom and y == height - 1):
-            border_color = background + (
+            border_color = base_background + (
                 border_top_color if y == 0 else border_bottom_color
             )
             box_segments = get_box(
@@ -296,9 +296,13 @@ class StylesCache:
 
             if border_left or border_right:
                 # Add left / right border
-                left_style = from_color((background + border_left_color).rich_color)
+                left_style = from_color(
+                    (base_background + border_left_color).rich_color
+                )
                 left = get_box(border_left, inner, outer, left_style)[1][0]
-                right_style = from_color((background + border_right_color).rich_color)
+                right_style = from_color(
+                    (base_background + border_right_color).rich_color
+                )
                 right = get_box(border_right, inner, outer, right_style)[1][2]
 
                 if border_left and border_right:
@@ -327,9 +331,9 @@ class StylesCache:
 
         elif outline_left or outline_right:
             # Lines in side outline
-            left_style = from_color((background + outline_left_color).rich_color)
+            left_style = from_color((base_background + outline_left_color).rich_color)
             left = get_box(outline_left, inner, outer, left_style)[1][0]
-            right_style = from_color((background + outline_right_color).rich_color)
+            right_style = from_color((base_background + outline_right_color).rich_color)
             right = get_box(outline_right, inner, outer, right_style)[1][2]
             line = line_trim(list(line), outline_left != "", outline_right != "")
             if outline_left and outline_right:

src/textual/app.py

@@ -146,7 +146,7 @@ class App(Generic[ReturnType], DOMNode):
     DEFAULT_CSS = """
     App {
         background: $background;
-        color: $text-background;
+        color: $text;
     }
     """
 
@@ -541,6 +541,9 @@ class App(Generic[ReturnType], DOMNode):
         except Exception as error:
             self._handle_exception(error)
 
+    def action_toggle_dark(self) -> None:
+        self.dark = not self.dark
+
     def action_screenshot(self, path: str | None = None) -> None:
         """Action to save a screenshot."""
         self.save_screenshot(path)

src/textual/cli/previews/borders.py

@@ -41,7 +41,7 @@ class BorderApp(App):
         border: solid $primary;
         height: auto;
         background: $panel;
-        color: $text-panel;
+        color: $text;
     }
     """
 

src/textual/cli/previews/easing.css

@@ -19,6 +19,7 @@ EasingButtons {
     padding: 1;
     height: auto;
     dock: top;
+    background: $boost;
 }
 
 Bar {
@@ -36,6 +37,6 @@ Bar {
 #opacity-widget {
     padding: 1;
     background: $warning;
-    color: $text-warning;
+    color: $text;
     border: wide $background;
 }

src/textual/color.py

@@ -249,6 +249,17 @@ class Color(NamedTuple):
             else f"#{r:02X}{g:02X}{b:02X}{int(a*255):02X}"
         )
 
+    @property
+    def hex6(self) -> str:
+        """The color in CSS hex form, with 6 digits for RGB. Alpha is ignored.
+
+        Returns:
+            str: A CSS hex-style color, e.g. "#46b3de"
+
+        """
+        r, g, b, a = self.clamped
+        return f"#{r:02X}{g:02X}{b:02X}"
+
     @property
     def css(self) -> str:
         """The color in CSS rgb or rgba form.
@@ -397,29 +408,31 @@ class Color(NamedTuple):
         return color
 
     @lru_cache(maxsize=1024)
-    def darken(self, amount: float) -> Color:
+    def darken(self, amount: float, alpha: float | None = None) -> Color:
         """Darken the color by a given amount.
 
         Args:
             amount (float): Value between 0-1 to reduce luminance by.
+            alpha (float | None, optional): Alpha component for new color or None to copy alpha. Defaults to None.
 
         Returns:
             Color: New color.
         """
         l, a, b = rgb_to_lab(self)
         l -= amount * 100
-        return lab_to_rgb(Lab(l, a, b), self.a).clamped
+        return lab_to_rgb(Lab(l, a, b), self.a if alpha is None else alpha).clamped
 
-    def lighten(self, amount: float) -> Color:
+    def lighten(self, amount: float, alpha: float | None = None) -> Color:
         """Lighten the color by a given amount.
 
         Args:
             amount (float): Value between 0-1 to increase luminance by.
+            alpha (float | None, optional): Alpha component for new color or None to copy alpha. Defaults to None.
 
         Returns:
             Color: New color.
         """
-        return self.darken(-amount)
+        return self.darken(-amount, alpha)
 
     @lru_cache(maxsize=1024)
     def get_contrast_text(self, alpha=0.95) -> Color:

src/textual/css/_styles_builder.py

@@ -580,7 +580,7 @@ class StylesBuilder:
         alpha: float | None = None
 
         for token in tokens:
-            if token.name == "token" and token.value == "auto":
+            if name == "color" and token.name == "token" and token.value == "auto":
                 self.styles._rules["auto_color"] = True
             elif token.name == "scalar":
                 alpha_scalar = Scalar.parse(token.value)
@@ -600,9 +600,10 @@ class StylesBuilder:
             else:
                 self.error(name, token, color_property_help_text(name, context="css"))
 
-        if color is not None:
+        if color is not None or alpha is not None:
             if alpha is not None:
-                color = color.with_alpha(alpha)
+
+                color = (color or Color(255, 255, 255)).with_alpha(alpha)
             self.styles._rules[name] = color
 
     process_tint = process_color

src/textual/design.py

@@ -15,7 +15,7 @@ NUMBER_OF_SHADES = 3
 # Where no content exists
 DEFAULT_DARK_BACKGROUND = "#000000"
 # What text usually goes on top off
-DEFAULT_DARK_SURFACE = "#292929"
+DEFAULT_DARK_SURFACE = "#1e1e1e"
 
 DEFAULT_LIGHT_SURFACE = "#f5f5f5"
 DEFAULT_LIGHT_BACKGROUND = "#efefef"
@@ -38,6 +38,7 @@ class ColorSystem:
         "secondary-background",
         "surface",
         "panel",
+        "boost",
         "warning",
         "error",
         "success",
@@ -55,6 +56,7 @@ class ColorSystem:
         background: str | None = None,
         surface: str | None = None,
         panel: str | None = None,
+        boost: str | None = None,
         dark: bool = False,
         luminosity_spread: float = 0.15,
         text_alpha: float = 0.95,
@@ -73,6 +75,7 @@ class ColorSystem:
         self.background = parse(background)
         self.surface = parse(surface)
         self.panel = parse(panel)
+        self.boost = parse(boost)
         self._dark = dark
         self._luminosity_spread = luminosity_spread
         self._text_alpha = text_alpha
@@ -126,6 +129,8 @@ class ColorSystem:
         else:
             panel = self.panel
 
+        boost = self.boost or background.get_contrast_text(1.0).with_alpha(0.07)
+
         colors: dict[str, str] = {}
 
         def luminosity_range(spread) -> Iterable[tuple[str, float]]:
@@ -153,6 +158,7 @@ class ColorSystem:
             ("secondary-background", secondary),
             ("background", background),
             ("panel", panel),
+            ("boost", boost),
             ("surface", surface),
             ("warning", warning),
             ("error", error),
@@ -178,14 +184,10 @@ class ColorSystem:
                 else:
                     shade_color = color.lighten(luminosity_delta)
                     colors[f"{name}{shade_name}"] = shade_color.hex
-                for fade in range(3):
+
-                    text_color = shade_color.get_contrast_text(text_alpha)
+        colors["text"] = "auto 95%"
-                    if fade > 0:
+        colors["text-muted"] = "auto 80%"
-                        text_color = text_color.blend(shade_color, fade * 0.1 + 0.15)
+        colors["text-disabled"] = "auto 60%"
-                        on_name = f"text-{name}{shade_name}-fade-{fade}"
-                    else:
-                        on_name = f"text-{name}{shade_name}"
-                    colors[on_name] = text_color.hex
 
         return colors
 
@@ -206,16 +208,12 @@ def show_design(light: ColorSystem, dark: ColorSystem) -> Table:
     def make_shades(system: ColorSystem):
         colors = system.generate()
         for name in system.shades:
-            background = colors[name]
+            background = Color.parse(colors[name]).with_alpha(1.0)
-            foreground = colors[f"text-{name}"]
+            foreground = background + background.get_contrast_text(0.9)
-            text = Text(f"{background} ", style=f"{foreground} on {background}")
-            for fade in range(3):
-                foreground = colors[
-                    f"text-{name}-fade-{fade}" if fade else f"text-{name}"
-                ]
-                text.append(f"{name} ", style=f"{foreground} on {background}")
 
-            yield Padding(text, 1, style=f"{foreground} on {background}")
+            text = Text(name)
+
+            yield Padding(text, 1, style=f"{foreground.hex6} on {background.hex6}")
 
     table = Table(box=None, expand=True)
     table.add_column("Light", justify="center")

src/textual/screen.py

@@ -33,6 +33,7 @@ class Screen(Widget):
     Screen {
         layout: vertical;
         overflow-y: auto;
+        background: $surface;
     }
     """
 

src/textual/scrollbar.py

@@ -213,7 +213,7 @@ class ScrollBar(Widget):
 
     def render(self) -> RenderableType:
         styles = self.parent.styles
-        background = (
+        background = self.parent.background_colors[1] + (
             styles.scrollbar_background_hover
             if self.mouse_over
             else styles.scrollbar_background

src/textual/widgets/_button.py

@@ -36,7 +36,7 @@ class Button(Widget, can_focus=True):
         width: auto;
         height: 3;
         background: $panel;
-        color: $text-panel;        
+        color: auto;      
         border: none;
         border-top: tall $panel-lighten-2;
         border-bottom: tall $panel-darken-3;
@@ -56,7 +56,7 @@ class Button(Widget, can_focus=True):
     Button:hover {
         border-top: tall $panel-lighten-1;
         background: $panel-darken-2;
-        color: $text-panel-darken-2;       
+        color: $text;
     }
 
     Button.-active {
@@ -69,7 +69,7 @@ class Button(Widget, can_focus=True):
     /* Primary variant */
     Button.-primary {
         background: $primary;
-        color: $text-primary;
+        color: $text;
         border-top: tall $primary-lighten-3;
         border-bottom: tall $primary-darken-3;
       
@@ -77,8 +77,8 @@ class Button(Widget, can_focus=True):
 
     Button.-primary:hover {
         background: $primary-darken-2;
-        color: $text-primary-darken-2;
+        color: $text;
-
+        border-top: tall $primary-lighten-2;
     }
 
     Button.-primary.-active {
@@ -91,14 +91,14 @@ class Button(Widget, can_focus=True):
     /* Success variant */
     Button.-success {
         background: $success;
-        color: $text-success;
+        color: $text;
         border-top: tall $success-lighten-2;
         border-bottom: tall $success-darken-3;
     }
 
     Button.-success:hover {
         background: $success-darken-2;
-        color: $text-success-darken-2;
+        color: $text;
     }
 
     Button.-success.-active {
@@ -111,14 +111,14 @@ class Button(Widget, can_focus=True):
     /* Warning variant */
     Button.-warning {
         background: $warning;
-        color: $text-warning;       
+        color: $text;
         border-top: tall $warning-lighten-2;
         border-bottom: tall $warning-darken-3;
     }
 
     Button.-warning:hover {
         background: $warning-darken-2;
-        color: $text-warning-darken-1;
+        color: $text;
        
     }
 
@@ -132,7 +132,7 @@ class Button(Widget, can_focus=True):
     /* Error variant */
     Button.-error {
         background: $error;
-        color: $text-error;
+        color: $text;
         border-top: tall $error-lighten-2;
         border-bottom: tall $error-darken-3;
      
@@ -140,7 +140,7 @@ class Button(Widget, can_focus=True):
 
     Button.-error:hover {
         background: $error-darken-1;
-        color: $text-error-darken-2;
+        color: $text;
 
     }
 

src/textual/widgets/_data_table.py

@@ -109,17 +109,17 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
     DEFAULT_CSS = """
     DataTable {
         background: $surface;
-        color: $text-surface;       
+        color: $text;       
     }
     DataTable > .datatable--header {        
         text-style: bold;
         background: $primary;
-        color: $text-primary;
+        color: $text;
     }
     DataTable > .datatable--fixed {
         text-style: bold;
         background: $primary;
-        color: $text-primary;
+        color: $text;
     }
 
     DataTable > .datatable--odd-row {
@@ -132,7 +132,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
 
     DataTable >  .datatable--cursor {
         background: $secondary;
-        color: $text-secondary;
+        color: $text;
     }
 
     .-dark-mode DataTable > .datatable--even-row {

src/textual/widgets/_directory_tree.py

@@ -74,7 +74,6 @@ class DirectoryTree(TreeControl[DirEntry]):
             label.stylize("bold")
             icon = "📂" if expanded else "📁"
         else:
-
             icon = "📄"
             label.highlight_regex(r"\..*$", "italic")
 

src/textual/widgets/_footer.py

@@ -16,25 +16,22 @@ class Footer(Widget):
     DEFAULT_CSS = """
     Footer {
         background: $accent;
-        color: $text-accent;
+        color: $text;
         dock: bottom;
         height: 1;
     }
     Footer > .footer--highlight {    
-        background: $accent-darken-1;    
+        background: $accent-darken-1;         
-        color: $text-accent-darken-1;               
     }
 
     Footer > .footer--highlight-key {        
-        background: $secondary;        
+        background: $secondary;                
-        color: $text-secondary;  
         text-style: bold;         
     }
 
     Footer > .footer--key {
         text-style: bold;        
-        background: $accent-darken-2;
+        background: $accent-darken-2;        
-        color: $text-accent-darken-2;
     }
     """
 

src/textual/widgets/_header.py

@@ -34,7 +34,7 @@ class HeaderClock(Widget):
         width: 10;
         padding: 0 1;
         background: $secondary-background-lighten-1;
-        color: $text-secondary-background;
+        color: $text;
         text-opacity: 85%;
         content-align: center middle;
     }
@@ -76,7 +76,7 @@ class Header(Widget):
         dock: top;
         width: 100%;
         background: $secondary-background;
-        color: $text-secondary-background;
+        color: $text;
         height: 1;
     }
     Header.tall {

src/textual/widgets/_tree_control.py

@@ -165,7 +165,7 @@ class TreeControl(Generic[NodeDataType], Static, can_focus=True):
     DEFAULT_CSS = """
     TreeControl {
         background: $surface;
-        color: $text-surface;
+        color: $text;
         height: auto;
         width: 100%;
     }
@@ -176,8 +176,7 @@ class TreeControl(Generic[NodeDataType], Static, can_focus=True):
 
     TreeControl > .tree--guides-highlight {
         color: $success;
-        text-style: uu;
+        text-style: uu;   
-        
     }
 
     TreeControl > .tree--guides-cursor {
@@ -186,12 +185,12 @@ class TreeControl(Generic[NodeDataType], Static, can_focus=True):
     }
 
     TreeControl > .tree--labels {
-        color: $text-panel;
+        color: $text;
     }
 
     TreeControl > .tree--cursor {
         background: $secondary;
-        color: $text-secondary;
+        color: $text;
     }
     
     """