Introduce Material Design 3 tokens based on HA design kit

[silamon]

Proposed change

Introduce Material Design 3 tokens based on HA design kit.
See the discussion in #18661.
Unblocks #16035 and #16023 and allows to adopt Material Design 3 faster.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes Sliders (and maybe more) are missing on-primary styling #18697
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

This would be a breaking change as --md-sys-color-primary will not be set using --primary-color for example.
I will discuss with the design team to see how we want to manage the migration to material 3 in a global way. That's why we scoped the variable to components for now.

[silamon]

I see what you mean. I think I will need to bring the current tokens into the m3 tokens earlier than I thought. Looking forward to the feedback. Perhaps we may have to do the components first.

[piitaya]

I discussed with the design team. The global material theme is not ready yet and we want to wait for a design decision before implementing global theme variables.

For now we only have primary and secondary color as theme variable (see screenshot below).

Material design 3 provides algorithm to generate key colors and tonal palettes (source: https://m3.material.io/styles/color/system/how-the-system-works). We want to look at the design level how we want to implement this to Home Assistant before implementing it in code.

Thanks for the contributions but for now we are closing this PR while waiting for the design. M3 variables should be set per component for now.

Primary and secondary color in HA