Add Label variants

examples/theme_sandbox.py

@@ -6,7 +6,7 @@ from typing import Any
 from textual._on import on
 from textual.app import App, ComposeResult
 from textual.binding import Binding
-from textual.containers import Grid, Horizontal, VerticalScroll
+from textual.containers import Container, Grid, Horizontal, VerticalScroll
 from textual.widgets import (
     Button,
     Collapsible,
@@ -25,7 +25,7 @@ from textual.widgets import (
     Select,
     SelectionList,
     Switch,
-    Tabs,
+    TabbedContent,
     TextArea,
     Tree,
 )
@@ -209,6 +209,15 @@ class ChangingThemeApp(App[None]):
     RichLog {
         height: 4;
     }
+    TabbedContent {
+        width: 34;
+    }
+    #label-variants {
+        & > Label {
+            padding: 0 1;
+            margin-right: 1;
+        }
+    }
 
     #palette {
         height: auto;
@@ -234,6 +243,17 @@ class ChangingThemeApp(App[None]):
     .no-border {
         border: none;
     }
+    #menu {
+        height: auto;
+        width: auto;
+        border: round $border;
+
+        & OptionList {
+            background: transparent;
+            padding: 0;
+            border: none;
+        }
+    }
     """
 
     BINDINGS = [
@@ -368,7 +388,38 @@ class ChangingThemeApp(App[None]):
                 yield Button.success("Success 2")
                 yield Button.error("Error 3")
                 yield Button.warning("Warning 4")
-            yield Tabs("First tab", "Second tab", "Third tab", "Fourth tab")
+
+            with Horizontal(id="label-variants"):
+                yield Label("Primary", variant="primary")
+                yield Label("Secondary", variant="secondary")
+                yield Label("Accent", variant="accent")
+                yield Label("Warning", variant="warning")
+                yield Label("Error", variant="error")
+                yield Label("Success", variant="success")
+
+            with Container(id="menu") as container:
+                container.border_title = "Menu"
+                with TabbedContent("Foods", "Drinks", "Desserts", "Extras"):
+                    yield OptionList(
+                        "Pizza",
+                        "Pasta",
+                        "Salad",
+                        "Soup",
+                    )
+                    yield OptionList(
+                        "Coke",
+                        "Sprite",
+                        "Fanta",
+                        "Root Beer",
+                    )
+                    yield OptionList(
+                        "Ice Cream",
+                        "Chocolate",
+                        "Cake",
+                        "Pie",
+                    )
+                    yield OptionList("Extra 1", "Extra 2", "Extra 3", "Extra 4")
+
             yield MaskedInput(
                 template="9999-9999-9999-9999;0",
             )

src/textual/theme.py

@@ -219,22 +219,6 @@ BUILTIN_THEMES: dict[str, Theme] = {
             "button-color-foreground": "#272822",
         },
     ),
-    "cobalt": Theme(
-        name="cobalt",
-        primary="#4878A6",
-        secondary="#334D5C",
-        warning="#FFAA22",
-        error="#E63946",
-        success="#4CAF50",
-        accent="#D94E64",
-        dark=True,
-        surface="#27343B",
-        panel="#2D3E46",
-        background="#1F262A",
-        variables={
-            "button-color-foreground": "#1F262A",
-        },
-    ),
     "flexoki": Theme(
         name="flexoki",
         primary="#205EA6",  # blue

src/textual/widgets/_label.py

@@ -1,5 +1,7 @@
 """Provides a simple Label widget."""
 
+from rich.console import RenderableType
+
 from textual.widgets._static import Static
 
 
@@ -11,5 +13,56 @@ class Label(Static):
         width: auto;
         height: auto;
         min-height: 1;
+
+        &.success {
+            color: $text-success;
+            background: $success-muted;
+        }
+        &.error {
+            color: $text-error;
+            background: $error-muted;
+        }
+        &.warning {
+            color: $text-warning;
+            background: $warning-muted;
+        }
+        &.primary {
+            color: $text-primary;
+            background: $primary-muted;
+        }
+        &.secondary {
+            color: $text-secondary;
+            background: $secondary-muted;
+        }
+        &.accent {
+            color: $text-accent;
+            background: $accent-muted;
+        }
     }
     """
+
+    def __init__(
+        self,
+        renderable: RenderableType = "",
+        *,
+        variant: str | None = None,
+        expand: bool = False,
+        shrink: bool = False,
+        markup: bool = True,
+        name: str | None = None,
+        id: str | None = None,
+        classes: str | None = None,
+        disabled: bool = False,
+    ) -> None:
+        super().__init__(
+            renderable,
+            expand=expand,
+            shrink=shrink,
+            markup=markup,
+            name=name,
+            id=id,
+            classes=classes,
+            disabled=disabled,
+        )
+        if variant:
+            self.add_class(variant)

src/textual/widgets/_tabbed_content.py

@@ -169,7 +169,6 @@ class TabPane(Widget):
     DEFAULT_CSS = """
     TabPane {
         height: auto;
-        padding: 1 2;
     }
     """