Muted color variations

examples/theme_sandbox.py

@@ -105,6 +105,7 @@ class ChangingThemeApp(App[None]):
     ColorSample {
         width: 1fr;
         color: $text;
+        padding: 0 1;
         &.hover-surface {
             &:hover {
                 background: $surface;
@@ -162,6 +163,30 @@ class ChangingThemeApp(App[None]):
         &.text-disabled {
             color: $text-disabled;
         }
+        &.primary-muted {
+            color: $text-primary;
+            background: $primary-muted;
+        }
+        &.secondary-muted {
+            color: $text-secondary;
+            background: $secondary-muted;
+        }
+        &.accent-muted {
+            color: $text-accent;
+            background: $accent-muted;
+        }
+        &.warning-muted {
+            color: $text-warning;
+            background: $warning-muted;
+        }
+        &.error-muted {
+            color: $text-error;
+            background: $error-muted;
+        }
+        &.success-muted {
+            color: $text-success;
+            background: $success-muted;
+        }
     }
     ListView { 
         height: auto;
@@ -280,7 +305,6 @@ class ChangingThemeApp(App[None]):
         self.title = "Theme Sandbox"
         with Grid(id="palette"):
             theme = self.current_theme
-            color_system = theme.to_color_system()
             for variable, value in vars(theme).items():
                 if variable not in {
                     "name",
@@ -291,19 +315,32 @@ class ChangingThemeApp(App[None]):
                 }:
                     yield ColorSample(f"{variable}", classes=variable)
             for color_name in [
+                "muted",
                 "primary",
                 "secondary",
                 "accent",
                 "warning",
                 "error",
                 "success",
-                "muted",
             ]:
                 yield ColorSample(
-                    f"text-{color_name}",
+                    f"text-{color_name} on background",
                     classes=f"text-{color_name} background hover-surface",
                 )
 
+            for color_name in [
+                "primary",
+                "secondary",
+                "accent",
+                "warning",
+                "error",
+                "success",
+            ]:
+                yield ColorSample(
+                    f"text-{color_name} on {color_name}-muted",
+                    classes=f"text-{color_name} {color_name}-muted",
+                )
+
         yield Header(show_clock=True, icon="🐟")
         yield ThemeList(id="theme-list")
         with VerticalScroll(id="widget-list") as container:

src/textual/design.py

@@ -211,6 +211,16 @@ class ColorSystem:
             colors["text-muted"] = "ansi_default"
             colors["text-disabled"] = "ansi_default"
 
+        # Muted variants of base colors
+        colors["primary-muted"] = get("primary-muted", primary.with_alpha(0.3).hex)
+        colors["secondary-muted"] = get(
+            "secondary-muted", secondary.with_alpha(0.3).hex
+        )
+        colors["accent-muted"] = get("accent-muted", accent.with_alpha(0.3).hex)
+        colors["warning-muted"] = get("warning-muted", warning.with_alpha(0.3).hex)
+        colors["error-muted"] = get("error-muted", error.with_alpha(0.3).hex)
+        colors["success-muted"] = get("success-muted", success.with_alpha(0.3).hex)
+
         # Foreground colors
         colors["foreground-muted"] = get(
             "foreground-muted", foreground.with_alpha(0.6).hex