For a while now, I've been thinking about how the new styles system should look like. The current theme is built with Bootstrap 3 and an old version of LESS, which makes it painful to customize. You have to fork Misago's frontend package and upload custom compiled CSS file after modifications for best results. And even this is labour intensive because of how styles and variables are laid out.
For now I'll try to resist the urge to create a design for the new system, instead focusing on pain points and lessons learned.
It must be possible to build final CSS on the server
Current themes system supports only CSS. If you want to use something else, you need to build final CSS files on your machine that you'll then upload in the admin. And there are good reasons why SASS or LESS were invented - CSS can be painful to write.
This is a solved problem: Misago can run npx sass or npx lessc in a celery task and then handle the result.
Styles must use only colors from palette
Misago's LESS is littered with things like darken(@gray-lighter, 10). This is because BS3 had five shades per color (light, lighter, color, darker, dark). New styles should have 9 or 10 shades per color like Tailwind or modern Bootstrap.
Don't share styles between major components
Misago attempts to use Bootstrap's panel and list-group styles for major components, and this results in those components having extra CSS overrides. This also makes those components flaky when those base styles or their variables are customized by the developer.
Style files per-component instead of per-page
Making style files per-page results in large CSS files that are hard to reason about. It also makes it painful when component its used across multiple pages.
More button styles
Bootstrap's standard primary,default,warning and danger styles don't cut it for an app like Misago. Here we should have primary and default button styles for use against page's background, separate default and primary style for form footer, same for modal footer, on error pages, in posts, etc. ect. This is painful in Bootstrap but doable with a SASS mixin.
Bad breakpoints
Current breakpoints produce bad UX on tablets or larger mobile phones. Better approach is needed. Maybe fine-tuned breakpoints or alternative approaches to breaking UI into multiple lines.