Revamp the color system

[KTibow]

Problems with current colors:

• M3 stuff requires redeclaring each time, and sometimes not everything is redeclared
• The accent color isn't very nice & has bad contrast
• The primary color has bad contrast in light mode

Solution:
Become M3-first. Make a base set of things like --md-sys-color-primary: [the color], and turn primary-color into a derived color.
Now the base style is M3-generated, it looks better, and redeclaring M3 stuff each time is no longer needed.

Result:

Before	After

Blockers:

• Breaking change, all themes need to be rewritten
• This is essentially changing the color of Home Assistant which means some people won't like this change

Conclusion:
I want to make a PR for this, but since this is a big change I want to get people's thoughts first, so leave your thoughts in the comments (ideally as in "change [...] to [...]" or "this will only be accepted if [...]", not "this is a bad idea")

[silamon]

I think it's the way to go, to make a m3 global theme (similar to this) and keep component tokens at a minimum if possible. I've seen you already did an attempt in #16035, but I guess you were the first one to try so at that time and therefore got no real discussion. More components are being migrated, so there may be more interest right now. With the before and after you have given, does that mean you've a global theme proposal ready?

There's no (?) documentation on which tokens are usable for theme authors and if you pick a few random themes from this article you will see that's a mixture of all kinds. I think it would be great to document (or just refer to the documentation of m3 design) now that there's a chance. As a result, I don't think it may be a breaking change, but whatsoever you will get unhappy people. (I've seen that when we migrated the slider from polymer to m3 last month. 😅)

Still, it looks like the code base will stick longer with a combination of Polymer (paper-tokens), Material Design Components (mdc-tokens) and now Material Design 3 (md-tokens). Mainly because of there's a lot of code, it's hard to migrate from one to another and since the new material design 3 is not complete as of today, that won't make it easier. It's actually not really clear at this time if material design 3 is on their internal roadmap. Polymer to be completely removed from the code base has been mentioned in 2019 and should be a no-brainer now since the last polymer elements are replaced and there's just a bunch of paper-elements left.

Looking forward to the comments of the HomeAssistant team, since I think that is required to have to move forward.

[KTibow]

Yeah what I was thinking is changing the variable flow to something like

md-tokens (md-sys-color-primary) -> home assistant custom variable names (primary-color) -> other frameworks (mdc-theme-primary)

However it could also go other ways, like making HA's own elements directly use md-sys-color-primary instead of primary-color, or making mdc-theme-primary directly depend on md-sys-color-primary.

[silamon]

@matthiasdebaat would it be possible to create a material 3 theme for Home Assistant since more and more components are being migrated to Material 3? That would be a great first step and allow us to adopt material 3 faster (it would also help to generalizing dialog layouts, which is a feature request from you since dialogs are to be migrated as well)

[silamon]

Still experimenting with m3 from time to time, I've seen the Design Kit on Figma with the m3 theme the designers came up with but we don't have many components on m3 yet to see what it looks like in the end.

For M3 components (todo):

• buttons
• checkbox, radios and menus
• dialogs
• fab (closed pr available)
• icon buttons
• lists (component made, lists needs to be migrated)
• select and dropdowns
• switch (closed pr available)
• tabs
• text fields

Unfortunately, not all m2 components have available m3 components yet.

In the theme, we're missing:

• "md-sys-color-inverse-primary"
• "md-sys-color-shadow"
• "md-sys-color-surface-tint"
• "md-sys-color-outline-variant"
• "md-sys-color-scrim"

It might be a good thing to set up a design page with all these components, so we can see how to the color theme affects all available components.

[KTibow]

Unfortunately, not all m2 components have available m3 components yet.

List some.

In the theme, we're missing:

Shadow and scrim are always #000. Surface tint is always primary.
But yeah I think that we should probably change the colors we use for stuff like disabled text and outlines to match with M3 better.

[silamon]

Looking at the packages we use right now, the components would be:
Card
Data table
Top app bar
Tooltip

Their design kit is pretty much complete then. I'm testing with the colors right now to see if a m3 theme can be made globally.

[KTibow]

• Cards: We can implement those ourselves
• Table: I don't think these made it into the M3 spec, we can always implement these ourselves
• Top app bar: Let's wait
• Tooltip: We're already using another library for these

[RGarrido03]

I'm looking forward to seeing this M3 revamp! The default HA UI starts to feel a bit outdated with these M2 colors. I love both design and frontend, so I can give a hand on this 😅

[Madelena]

Revamping the color system requires coordination between:

• The Home Assistant brand: How does the colors look when adapted to the HA logo / brand guidelines?
• The UX requirements for the colors: Our implementation is not an exact duplication of Material Design. There are special requirements for custom elements specific to home automation and dashboards.
• The frontend implementation and how it will work moving forward.
• WCAG standards for accessibility.

This will only be accepted if the new color system passes all 4 criteria.

[KTibow]

I might be a bit ignorant but aren't #1 and #4 mutually exclusive when the official branding has failing contrast?

Color	Ratio on white	Specs
#18BCF2	2.2 WCAG 2, 2.1 as foreground, 2.1 as background	Official color. Failing contrast ratio.
#156683	6.44 WCAG 2, 5.8 as foreground, 6.4 as background	M3 Tonal Spot-derived color. AA, almost AAA ratio.
#006686	6.47 WCAG 2, 5.8 as foreground, 6.4 as background	M3 Content-derived color. AA, almost AAA ratio.

*Background/foreground ratios using APCA, a more accurate algorithm

[uneart]

I find @KTibow makes a valid point here. If WCAG standards (e.g. WCAG 2.2 AA) are a criteria for the color system to change, then the current system should be challenged against the very same criteria.

As for this very suggestion to use M3 as a basis: Material3 could probably be a good basis as it factors in accessibility already.
But I would think Home Assistant (and its brand) is at a stage and size that when discussing a new color scheme, it could be discussed if Home Assistant should really keep basing itself on a design system like Material, mainly driven by Google. Another option could be that Home Assistant starts its own open UI system, maybe even in collaboration with the Open UI initiative or joining the discussion of a global design system, brought up by e.g. Brad Frost.

I don't intend to open a can of worms, so if this discussion is misplaced here, please point me in the right direction :)