Border Panel & Tab Auto Contrast Color

[ddkasa]

So I have been experimenting with some border panels and have been wondering if they should be contrasting the border color instead, as using the background for the auto-contrast can leave un-desired results and is inconsistent with auto-contrast color for generic text.

I have attached some screenshots in different themes to demonstrate the issue.

I understand the change is recent when the Tab style was added, so maybe this is intentional?

MRE

from textual.app import App
from textual.widgets import Static
from textual.containers import Container


class BugReportApp(App):
    CSS = """
    Container {
        border-title-color: auto;
        background: $panel;
        max-height: 2;
        width: 20;
        border: panel $surface-lighten-1;
        margin-bottom: 1;
    }

    Static {
        color: auto;
        content-align: center middle;
        background: $surface-lighten-1;
        height: 1;
        width: 15;
    }
    """

    def compose(self):
        c = Container()
        c.border_title = "Panel Title"
        yield c
        yield Static("Content")


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

Textual Diagnostics

Versions

Name	Value
Textual	1.0.0
Rich	13.9.4

Python

Name	Value
Version	3.12.3
Implementation	CPython
Compiler	GCC 13.2.1 20240316 (Red Hat 13.2.1-7)
Executable	/home/dk/tmp/textual-color-variable/.venv/bin/python

Operating System

Name	Value
System	Linux
Release	6.11.11-200.fc40.x86_64
Version	#1 SMP PREEMPT_DYNAMIC Thu Dec 5 18:38:39 UTC 2024

Terminal

Name	Value
Terminal Application	Kitty
TERM	xterm-kitty
COLORTERM	truecolor
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=137, height=54
legacy_windows	False
min_width	1
max_width	137
is_terminal	True
encoding	utf-8
max_height	54
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[github-actions]

Thank you for your issue. Give us a little time to review it.

PS. You might want to check the FAQ if you haven't done so already.

This is an automated reply, generated by FAQtory

[darrenburns]

Yeah, there's some weirdness here. Simpler MRE:

from textual.app import App
from textual.widgets import Static
from textual.containers import Vertical


class BugReportApp(App[None]):
    CSS = """
    Vertical {
        border: tab #f0f0f0;
        background: black;
        border-title-color: auto;
    }
    """

    def compose(self):
        with Vertical() as c:
            c.border_title = "Panel Title"
            yield Static("Content")


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