replace custom components with @material/web

[incognitojam]

@material/web is a collection of web components based on the Material 3 design system

The components I created (in src/components/material) were based on Material 3, but the @material/web package wasn't ready at the time. They haven't implemented every component yet, but we can use some (and align with its theming system to make adopting it easier).

• add @material/web and material-web-solid-js-typing package which is needed to define the types to use the new elements in JSX
• remove some unused components (CircularProgress, LinearProgress)
• define material theme tokens in global CSS (and define colors in tailwind.config.js for our custom components)
• remove tw-colors package

TODO

• replace custom Typography component (https://material-web.dev/theming/typography/)
• automatic light/dark mode

Alternatives

• continue developing our own components
• consider SolidUI which is a port of https://github.com/shadcn-ui/ui for solid. It is a build-your-own component library where you copy components into your own project
• i'm not familar with any other solid UI libraries

[github-actions]

Welcome to new-connect! Make sure to:

• read the contributing guidelines
• mark your PR as a draft until it's ready to review
• post the preview on Discord; feedback from users will speedup the PR review

deployed preview: https://14.connect-d5y.pages.dev

[incognitojam]

This is in a working state but I'm getting type errors in VS Code for the custom web components, https://github.com/SgLy/material-web-solid-js-typing is very new

[ugtthis]

"consider SolidUI which is a port of https://github.com/shadcn-ui/ui for solid." I'm a bigger fan of this alternative route. It seems like going with other UI libraries people end up changing the components or there ends up being a lot of components not being used (80/20 principle).

Building our own component library would give the UI a better experience since we can tweak components and build a better native like experience. We can still pick and choose what things we want to adopt from other UI libraries and create them in our own, like what you did for some components that were based on Material 3.

Would be cool to see new-connect experiment and do things differently than how old connect went about UI

[incognitojam]

I agree we should do something different from old connect, but that was using MUI react components and not web components, however...
material-components/material-web#5642
Google has just moved dev team away from material web components!

@material/web looked promising but since it won't be updated to add missing components soon, may as well use shadcn-ui/SolidUI