$foreground instead of $text in more places

docs/guide/design.md

@@ -190,16 +190,15 @@ Here's a comprehensive list of these variables, their purposes, and default valu
 | `$footer-description-background` | Background color for descriptions in the footer | `"transparent"` |
 | `$footer-item-background` | Background color for items in the footer | `"transparent"` |
 
-### Progress Bar
+## App-specific variables
 
-| Variable | Purpose | Default Value |
-|----------|---------|---------------|
-| `$progress-bar-color` | Color of the progress bar in normal state | `$primary` |
-| `$progress-bar-background` | Background color of the progress bar in normal state | `$surface` |
-| `$progress-bar-complete-color` | Color of the progress bar when complete | `$success` |
-| `$progress-bar-complete-background` | Background color of the progress bar when complete | `$surface` |
-| `$progress-bar-indeterminate-color` | Color of the progress bar in indeterminate state | `$error` |
-| `$progress-bar-indeterminate-background` | Background color of the progress bar in indeterminate state | `$surface` |
+The variables above are defined and used by Textual itself.
+However, you may also wish to expose other variables which are specific to your application.
+
+You can do this by overriding `App.get_theme_variable_defaults` in your `App` subclass.
+
+This method should return a dictionary of variable names and their default values.
+If a variable defined in this dictionary is also defined in a theme's `variables` dictionary, the theme's value will be used.
 
 ## Previewing colors
 

examples/theme_sandbox.py

@@ -12,6 +12,7 @@
     Collapsible,
     DataTable,
     Footer,
+    Header,
     Input,
     Label,
     ListItem,
@@ -247,6 +248,7 @@ def watch_theme(self, theme_name: str) -> None:
         print(theme_name)
 
     def compose(self) -> ComposeResult:
+        self.title = "Theme Sandbox"
         with Grid(id="palette"):
             theme = self.current_theme
             for variable, value in vars(theme).items():
@@ -259,6 +261,9 @@ def compose(self) -> ComposeResult:
                 }:
                     yield ColorSample(f"{variable}", classes=variable)
 
+        header = Header(show_clock=True, icon="🐟")
+        header.tall = True
+        yield header
         yield ThemeList(id="theme-list")
         with VerticalScroll(id="widget-list") as container:
             container.can_focus = False

src/textual/widgets/_collapsible.py

@@ -24,8 +24,8 @@ class CollapsibleTitle(Static, can_focus=True):
     }
 
     CollapsibleTitle:hover {
-        background: $foreground 10%;
-        color: $text;
+        background: $block-hover-background;
+        color: $foreground;
     }
 
     CollapsibleTitle:focus {

src/textual/widgets/_header.py

@@ -75,7 +75,7 @@ class HeaderClock(HeaderClockSpace):
     DEFAULT_CSS = """
     HeaderClock {
         background: $foreground-darken-1 5%;
-        color: $text;
+        color: $foreground;
         text-opacity: 85%;
         content-align: center middle;
     }
@@ -131,8 +131,8 @@ class Header(Widget):
     Header {
         dock: top;
         width: 100%;
-        background: $foreground 5%;
-        color: $text;
+        background: $panel;
+        color: $foreground;
         height: 1;
     }
     Header.-tall {