(Text) Opacity isn't read from component classes styles.

[rodrigogiraoserrao]

(TL;DR: This is likely the cause of Textual#3304 and this will likely be fixed if Textual#3413 is fixed first.)

Following #3304, an investigation showed that there are widgets for which the (text-)opacity in component classes is ignored.

Here are said widgets: - Checkbox (ToggleButton's fault) - DirectoryTree - Input - OptionList (as first reported in Textual#3304) - RadioButton (ToggleButton's fault) - Tree

Below you can find an app that showcases these:

myapp.py

from textual.app import App, ComposeResult
from textual.widgets import (
    Checkbox,
    RadioButton,
    DirectoryTree,
    Input,
    Switch,
    Tree,
)


class CCApp(App[None]):
    CSS_PATH = "myapp.tcss"

    def compose(self) -> ComposeResult:
        yield Checkbox("checkbox")
        yield DirectoryTree(".")
        yield Input(placeholder="placeholder text")
        yield RadioButton("radio button")
        yield Switch()
        tree = Tree("Dune", id="tree")
        tree.root.expand()
        characters = tree.root.add("Characters", expand=True)
        characters.add_leaf("Paul")
        characters.add_leaf("Jessica")
        characters.add_leaf("Chani")
        yield tree


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

myapp.tcss

Checkbox > .toggle--label {
    opacity: 0%;
    text-opacity: 0%;
    color: #ffffff00;  # alpha also ignored here.
}

DirectoryTree > .directory-tree--file {
    text-opacity: 0%;
    opacity: 0%;
    color: #ffffff00;  # alpha ignored here.
}

Input > .input--placeholder {
    text-opacity: 0%;
    opacity: 0%;  # opacity of background is respected.
    background: red;  # invisible because opacity is 0%.
    # color: #ffffff00;  # alpha in color is respected.
}

RadioButton > .toggle--label {
    text-opacity: 0%;
    opacity: 0%;
    background: #00000000;  # alpha also ignored here.
    color: #ffffff00;  # alpha also ignored here.
}

Switch > .switch--slider {
    opacity: 0%;  # opacity of background is respected.
    background: red;  # invisible because opacity is 0%.
    text-opacity: 0%;
    # color: #ffffff00;  # alpha in color is respected.
}

#tree > .tree--label {
    opacity: 0%;
    text-opacity: 0%;
    color: #ffffff00;  # alpha ignored here.
    background: blue 0%;  # alpha ignored here.
}

[rodrigogiraoserrao]

After more digging and experimentation, it looks like it's textual.dom.DOMNode.rich_style that's not taking into account the style text-opacity when calculating the text color and this is the root cause of #3304.

[github-actions[bot]]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.