Update ha-fab (Material 3)

[KTibow]

Proposed change

Updates ha-fab to use @material/web (Material 3) for the FAB instead of @material/mwc-fab.
With the new FAB component, the styling, capitalization, and attributes available have changed.

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

Additional information

• This PR fixes or closes issue: fixes #
• 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]

M3 fab is in alpha for now. It should we should wait some updates and stabilisation before updating it do avoid breaking changes. At least beta step should be fine ?

Alpha components are in-development and may have many frequent breaking changes.
Beta components are mostly polished and ready for use.
Stable components are reviewed, documented, and API complete.

Also, we need to define a global theme to have a consistent look at feeling across all m3 UI components.

[KTibow]

I definitely agree that we should make a global theme. I don't think the FAB will have breaking changes, but if you think this shouldn't be merged yet then that's understandable.

[KTibow]

here's my first bit of work at a global theme

--md-sys-color-primary: var(--primary-color);
--md-sys-color-on-primary: var(--text-primary-color);
/* TODO secondary + container */
/* TODO tertiary + container */
--md-sys-color-background: var(--primary-background-color);
--md-sys-color-on-background: var(--primary-text-color);
--md-sys-color-surface: var(--primary-background-color);
--md-sys-color-on-surface: var(--primary-text-color);
/* TODO inverse-surface (should we just switch them?) also inverse-primary (should we just use primary?) */
--md-sys-color-surface-variant: var(--card-background-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-outline: var(--secondary-text-color);
--md-sys-color-outline-variant: var(--divider-color);
--md-sys-color-error: var(--error-color);
--md-sys-color-on-error: white;
/* TODO error container */
/* TODO shadow, scrim (should we just use black always?) */

[KTibow]

Over in the Discord I asked about a problem I'm having:

working on a m3 global theme and im running into some problems about primary
see in m3, primary is a relatively desaturated color (https://i.ibb.co/28LWXND/image.png https://i.ibb.co/VW9Zfb2/image.png)
in home assistant, primary is kinda saturated (https://i.ibb.co/31RTxfF/image.png)
now this is fine on its own (albeit meaning less contrast), but in m3, on-primary is a thing. if you're in light mode, primary is dark, so on-primary is light. if you're in dark mode, primary is light, so on-primary is dark.
in home assistant, text-primary-color is light in both of the default themes. this means if i use it as on-primary, things will be light where they should be dark in dark theme.

Nobody responded (besides Bram who seemed to not get what I meant, then ghosted me). Any ideas here on how to resolve this issue?

[LasseRosenow]

The FAB is now beta 🥳

[KTibow]

Great, we still need to wait for @material/web to be updated to the latest version and for someone to tell me what I should use for on-primary.

[github-actions]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days.
Thank you for your contributions.

[KTibow]

Stale.