Getting a Rich style from a CSS colour variable?

[mon]

I have a component that I want to have a dimmed prefix before normal text.
Because I'm using render instead of compose, I can't just slap two Statics together and call it a day.

My current approach seems awfully complex:

• DEFAULT_CSS which specifies two new classes, one with color: $text-disabled and one with color: $text
• COMPONENT_CLASSES referencing those two new classes
  ... and finally, the text itself:

self.value = Text(
    "0x", style=self.get_component_rich_style("mywidget--prefix")
).append(
    f"{hex_value:X}",
    style=self.get_component_rich_style("mywidget--normal"),
)

Is there an easier way around this? In an idea world I'd like to just write:

self.value = Text(
    "0x", style=rich_style_from_css("color: $text-disabled")
).append(
    f"{hex_value:X}",
    style=rich_style_from_css("color: $text")
)

[davep]

Normally when I want to do this I just use the [dim] Rich markup. For example this code is what's involved in making this:

[mon]

Oh, that's super convenient! Does it respect light/dark theme? I guess a medium grey is probably about the same regardless of the background 😅

[davep]

Good question. Not sure about "respect", but it seems to look fine in my apps:

[mon]

Totally usable in my mind, and the rich markup is super compact. Works for me!