Use an existing UI framework, such as Material-UI

Writing a UI framework is difficult. I tried it myself for a couple of years (for our Argu platform), and though the control it gave me was awesome, in the long run it was quite costly. The truly difficult part is finding the right abstraction - especially when it comes to theming functionality. Since Solid is all about giving the user an extremely high level of control, we need a theming strategy.

One UI library has a particularly powerful and well-thought way of creating themes: Material-UI. It's docs explain nicely how it works. In short, it uses CSS-in-JS to enable data (props) dependent UI changes and a theme abstraction that enables theme nesting. It also offers logic to deal with server side rendering, which is always nice.

We could create a material-ui theme for Solid, with purple accents. We can let users change their theme as well. We might specify a "solid:themePreference" shape that sets a (minimal) set of parameters, such as heading font, rounded corners, drop shadows, night theme, etc.

The design of material-ui (or at least, the default theme) seems to look a lot like design.inrupt.com. It uses cards with drop shadows, colored checkboxes, similar toggle buttons, the 'pills' tag abstraction, similar label+input form designs, the three button menu icon...

What also helps, is that Material-ui is a really popular repo, which means that it works really well on a lot of browsers, and has proper accessibility setttings. It's dateTime pickers, for example, work like a charm with a keyboard.

It has a really nice alert ('snackbar') abstraction, it's forms look & feel great, the dropdown menus and dialogs are awesome, the tables are wonderful...

It's quite a large dependency (425kb minified, 101kb gzipped), but I think it is worth it, since it could save us a ton of time during development. It also might help to make the Solid UX more consistent, if we would nudge solid component developers to use this (e.g. by including it in a boilerplate). If we use JS Modules, we can prevent duplicate loading and save bandwith.

No source file, test, or entry point is identified. Start by reviewing the repository's existing UI widgets and utilities, then compare their needs with Material-UI's theming and component model. Done would require an agreed framework and theming strategy, followed by implementation across the affected UI components.