Review setting style attributes with CSS variables

[davep]

Stemming from this question on Discord:

Hi there, trying to change the color of a label, I'm running into an error:

        label = Label("✅ The message has been copied to your clipboard")
        label.styles.color = "$success"
        label.styles.width = "100%"

StyleValueError: Invalid color value '$success'
Am I doing sth stupid?

Currently the normal advice would be to use a CSS class and swap the class in and out. However, the person asking says they were thinking that it should work as the Python docs at the bottom of this page say it should:

# Mimicking the CSS syntax
widget.styles.background = "red"           # Color name
widget.styles.color = "$accent"            # Textual variable
widget.styles.tint = "hsl(300, 20%, 70%)"  # HSL description

At first glance it seems that this isn't supported, and the docs may have been written thinking it does/would, but we're thinking that this would be a good thing to support.

So... look into adding support for this if possible.

[willmcgugan]

This feels like it should be made to work. Although it may have repercussions beyond colors.

I would expect that anywhere a string is accepted Textual should to the preprocess step. So color=rgb($red,20,30) should work, but then border="$border_style $accent" should also work.

We should probably review how much effort this will be, and how we can report errors. If that is going to cause too much complication, we can still consider throwing an error. As long as the dev can still accomplish the same thing, with perhaps an additional line or two of code.

[davep]

Shall we revise the docs to reflect current working for now?

[willmcgugan]

I wouldn't bother until we have a plan with this issue. If anyone else notices we can point them here.

[willmcgugan]

Is there a function to do this? substitute_references ?

Look in to how errors are reported?

[rodrigogiraoserrao]

The function substitute_references resolves variables when CSS is parsed, but that does not come into play when styles are assigned programmatically.
In fact, the parsing that happens when styles are set programmatically is very rudimentary and is done on a per-style basis.

In order to fully support setting CSS styles with variables, we would need to make a couple of changes to the codebase:

• we would need to save user-defined CSS variables (which entails deciding what variables are applicable when and how to account for the fact that CSS from some sources is parsed over and over again, off the top of my head); and
• we would need to look for variable usage when setting styles programmatically.

The second change can be done even if we do not allow user-defined variables to be used when setting styles programmatically, for example by creating a regex that looks for variable references when a style is set to a string value.

Overall, I don't think it makes sense to only support setting styles to variables defined by Textual's design system.
So, I recommend one of three approaches:

1. Define that we do not support setting styles to variables and update the docs.
2. Define that we do support setting styles to variables and:
   a. implement the changes outlined above; or
   b. start by adding support to Textual's variables and add an issue to expand support for user-defined variables.