Transparent component class background blends with wrong colour

[darrenburns]

When using component classes, if you set a transparent background, the blend is done against the parent of the widget the component class is instantiated in, rather than the parent of the widget where the component class is actually used.

This means if you use a component class inside a widget which contains nested children, the blend will be done against the wrong ancestor background colour.

In the example below, the parent of the widget the component class is applied to is red, however the style is blended against the green background of the Screen. I would expect the background of the label to appear a pinkish colour (white 50% blended with red) instead of the light green colour.

from rich.text import Text
from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widget import Widget
from textual.widgets import Label


class MyWidget(Widget):
    COMPONENT_CLASSES = {"foo"}
    DEFAULT_CSS = """
    MyWidget {
        background: white 50%;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():  # this has a red background
            style = self.get_component_rich_style("foo")

            # the label below has a white 50% background,
            # so we would expect it to blend with the red background
            # of its parent.
            # it instead blends with the green background of the screen.
            yield Label(Text("Hello, world!", style=style))


class MyApp(App[None]):
    CSS = """
    Screen {
        background: green;
    }
    Horizontal {
        background: red;
    }
    """

    def compose(self) -> ComposeResult:
        yield MyWidget(id="widget")


app = MyApp()
if __name__ == "__main__":
    app.run()