search

backdrop / backdrop-issues

Issue tracker for Backdrop core.
144 stars 38 forks source link

Add CSS Custom Properties to Core CSS #6445

Open wesruv opened 3 months ago

wesruv commented 3 months ago

Description of the need

In preparation for 2.x/new default theme/being awesome, I'd like to add custom properties (aka CSS variaables) into all core CSS for fonts & colors. I think this is key to getting dark mode support (https://github.com/backdrop/backdrop-issues/issues/4778), and hopefully provide a structure that contrib themes can follow so they can provide the same support.

I think a risk here is over-systematizing and having way too many CSS variables, not enough and things like dark mode support won't work as well as it ought to.

Proposed solution

I have an approach I used at Red Hat for a D9+ admin theme, I think it panned out pretty well, but I don't think it got enough feedback/testing, so once I can document it and get an alpha together, I'd love feedback. I might end up making this a contrib module that adds to or overrides CSS?

Alternatives that have been considered

If anyone else has approaches they want to try, want us to consider, etc I'm a big fan

Additional information

Add any other information or screenshots that would help. I've found most design systems have systematized more than I think is wise to, which is why I want to try something I think will work better for us and not feel overwhelming.

Draft of feature description for Press Release (1 paragraph at most)

Backdrop now includes...

indigoxela commented 3 months ago

@wesruv I'm looking forward to your approach. IMO CSS variables are a cool thing. :smiley: But they get tiring, when too many (and you can't find the one you need).

laryn commented 3 months ago

@wesruv I'm also looking forward to seeing what you have in mind. Working on Gin was the first time I'd used them and they are super helpful in providing all the customizations that the theme settings provide (dark mode, spacing, color, accent, etc.). Right now Gin does have a lot of these custom properties, no question, and I assume once core gets its own version of some of these variables it may be easy/possible to override the core value for the custom property rather than create a duplicate/new value in a theme/module/etc.

wesruv commented 3 months ago

@laryn Oh yea! I heard Gin was pretty popular in Backdrop now, I'll take a look at what it's doing in Backdrop land. I've worked with the D8 version.

wesruv commented 2 weeks ago

Noting we're having some good convo in this Zulip thread: https://backdrop.zulipchat.com/#narrow/stream/218635-Backdrop/topic/CSS.20Custom.20Property.20Standards