From 4589f090a929f003f30c4c485e533c74ebd15dad Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Mon, 28 Oct 2024 13:01:29 +0000
Subject: [PATCH] $foreground instead of $text in more places

---
 docs/guide/design.md                | 17 ++++++++---------
 examples/theme_sandbox.py           |  5 +++++
 src/textual/widgets/_collapsible.py |  4 ++--
 src/textual/widgets/_header.py      |  6 +++---
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/docs/guide/design.md b/docs/guide/design.md
index ac236f72f..2c2d34ca3 100644
--- a/docs/guide/design.md
+++ b/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
 
diff --git a/examples/theme_sandbox.py b/examples/theme_sandbox.py
index 211d7c202..df0ee10bc 100644
--- a/examples/theme_sandbox.py
+++ b/examples/theme_sandbox.py
@@ -12,6 +12,7 @@ from textual.widgets import (
     Collapsible,
     DataTable,
     Footer,
+    Header,
     Input,
     Label,
     ListItem,
@@ -247,6 +248,7 @@ class ChangingThemeApp(App[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 @@ class ChangingThemeApp(App[None]):
                 }:
                     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
diff --git a/src/textual/widgets/_collapsible.py b/src/textual/widgets/_collapsible.py
index a31e4bec4..6c3f2164a 100644
--- a/src/textual/widgets/_collapsible.py
+++ b/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 {
diff --git a/src/textual/widgets/_header.py b/src/textual/widgets/_header.py
index d9d18fed0..2482a578e 100644
--- a/src/textual/widgets/_header.py
+++ b/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 {