More CSS like behavior in Themes

[dotlogix]

IMHO the current implementation of themes lacks a few important parts.
Classes, States and Selectors

In CSS you can use selectors to affect the current style of any of your Tag. You don't attach them to a specific Tag but to a selection of tags based on ids, classes, tags, pseudo-classes and attributes.

If you try to translate these to the current ThemeSystem this would mean that
InlineStyles = Theme Overrides
Tags = ControlClass or ThemeTypeVariant (At least for custom types)

There is no way to share styles across multiple controls besides theme inheritance using BaseType, but only one other type can be defined.

Atm I guess the intention is to create multiple ThemeTypeVariants for the same type of controls but one aspect is missing there which can result in truely customizable styles.

It would be awesome if Godot follows more of the CSS way allowing to define Styles based on selectors.
An example could be like this:

Hierarchy:
PanelControl (Name = "MyPanel")

• Button (Name = "MyButton")

Styles:
PanelControl {
background = Black
foreground = White
}

Button {
background = Grey
foreground = White
}

So far this can be achieved using the current system, now comes the proposed part.

Button($Button) {
background = DarkGrey
}

PanelContainer(.Blue) > Button($MyButton) {
background = Blue
}

PanelContainer(.Red) > Button($MyButton) {
background = DarkRed
}

Maybe you already see what I mean, but to describe it a bit here is the use-case.

I have a PanelContainer called "MyPanel" and a child Button called "MyButton"
I defined some custom styles for all PanelContainer and Buttons across Application
-> This can be achieved atm using Themes for Built-In Controls

Now I want to override some things based on the Layout of my nodes in the hierarchy.
So for all Buttons called "MyButton" ($MyButton) I want the background to change to sth else.
-> this can be achieved atm using ThemeTypeVariants

Now I want to give my PanelContainer a class called "Blue"
So if my PanelContainer has the class "Blue" all children of type Button called "MyButton" should receive a slightly changed style where I change the background to another color.

Same goes for the class "Red"
-> Classes don't need to be a new thing and instead could use the existing "Group" feature of Godot where each Node can have any numer of Groups. (Maybe still better to add sth like ThemeGroups to split the use-cases)

But the important part here is that a change on the Parent affected the style of it's children. No need for any fancy mapping code in my control to do sth like that and make errors somewhere. Also no need to even define a script on MyButton to change the ThemeTypeVariant at runtime because everything is already defined. Should also help a lot for caching.

States could also be achieved with the same System. In CSS these are pseudo-classes like :hover, :active, :focused and much more

So what do you think about this would it be nice to have Themes based on Hierarchy?
For me this would be a huge game changer do define my UI in a very simple way with minimal code to achieve what I want. Basically everything just comes down to an AddClass/RemoveClass just like in JS and WebDevelopment

[dalexeev]

Related:

• Add Control states for more flexible control of theme properties #2498