New design system: CSS framework selection

[dib542]

As a part of defining a more specific design spec for our designs, a CSS framework to apply the design system would be very helpful to ensure component consistency in code.

Examples of this would be using TailwindCSS + TailwindUI/DaisyUI/Flowbite, or ChakraUI, or (not seriously BootStrap, Material UI, Ant Design, BlueprintJS) to implement specific Figma designs.

[dib542]

The decision so far has been to use:

• Flowbite as the basis for
• On the front end implementation I would prefer not use Flowbite as it is propriatery and I think TailwaindCSS in general is a much less maintainable solution for an application than plain CSS or SCSS (hence why we removed Tailwind previously https://github.com/duality-labs/duality-web-app/pull/111)
  • I am now leaning towards:
    • CSS: either
      • keep plain SCSS
      • use Vanilla Extract to allow real TypeScript protect of CSS-in-JS without inline styles (generated static CSS files)
      • maybe use CSS Modules to scope SCSS to components
    • Interactions: either:
      • Radix UI
      • React Aria
      • Headless UI looks a bit underdeveloped and Tailwind centric
      • Maybe react-hot-toast if no Toast UI is available