Scrollbars appear to ignore the background colour percentage

[davep]

Each of the scrollbar styles say that they take a percentage that is the opacity to use. However, it appears that this value gets ignored. With this code:

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Static

class ScrollBarPercentageApp(App[None]):

    CSS = """
    Screen {
        layout: horizontal;
    }

    VerticalScroll {
        scrollbar-size-vertical: 10;

        &#no-pcent {
            background: $surface;
            scrollbar-background: $surface;
            scrollbar-background-active: $surface;
            scrollbar-background-hover: $surface;
        }

        &#pcent {
            background: $surface 10%;
            scrollbar-background: $surface 10%;
            scrollbar-background-active: $surface 10%;
            scrollbar-background-hover: $surface 10%;
        }
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll(id="no-pcent"):
            yield Static(
                "\n".join(
                    f"This is some text {n}" for n in range(100)
                )
            )
        with VerticalScroll(id="pcent"):
            yield Static(
                "\n".join(
                    f"This is some text {n}" for n in range(100)
                )
            )

if __name__ == "__main__":
    ScrollBarPercentageApp().run()

the result is this:

Note that on the left the scrollbar background and the container are set to $surface and they match; on the right they're set to $surface 10% and they don't match, which the scrollbar background appearing to still be just $surface.

[TomJGooding]

I think I've found the cause, but I wanted to double-check before submitting a PR: when the scrollbar background has opacity, should it blend with the 'base' background or the background of its widget?

In other words, should the scrollbar background actually match the widget background in the above example?

[davep]

From a "user of the library" perspective I think I'd expect this:

background: $surface 10%;
scrollbar-background: $surface 10%;

to result in the widget background and the widget's scrollbar's background to come out the same colour; it feels like that follows the rule of least astonishment. Or did I perhaps misunderstand?

[TomJGooding]

Here's a silly example which hopefully clarifies what I mean. Should the scrollbar background be some shade of purple where it is blended with the red screen background? You might consider the scrollbar part of the widget itself, so the background should be blended with the green widget background.

from textual.app import App, ComposeResult
from textual.containers import VerticalScroll
from textual.widgets import Static


class ScrollBarPercentageApp(App[None]):

    CSS = """
    Screen {
        align: center middle;
        background: #ff0000;
    }

    VerticalScroll {
        width: 50%;
        height: 50%;
        background: #00ff00;

        scrollbar-size-vertical: 10;
        scrollbar-color: #0000ff;
        scrollbar-background: #0000ff 50%;
    }
    """

    def compose(self) -> ComposeResult:
        with VerticalScroll():
            yield Static("\n".join(f"This is some text {n}" for n in range(100)))


if __name__ == "__main__":
    ScrollBarPercentageApp().run()

[davep]

I think I'd expect it to be blend with whatever the widget's background would blend with if it was somewhat transparent; so in this case with the screen. I think that would be my expectation.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.