I’d love to make custom themes and components that are aligned with the Discourse design system and that will blend into the app in a consistent and harmonious way.
Just looking at the code and how styles are defined and applied in core I find it difficult to make sense and actually get the idea of the bigger picture and the envisioned direction of the design system.
I’ll try to break this down into three main topics: color, type and spacing.
There was an introduction of a numeric scale for some values two years ago. I think it was mentioned that it’s just meant to supplement the named color transformations. For the tertiary color value it looks like this now:
I see both models applied in new code in core. Is the long-term idea to keep using them side-by-side or is there a different vision?
In any case, shouldn’t there be a numeric scale for all four main color values? Right now it’s just there for primary and tertiary, but not secondary and quaternary.
There’s currently three different types of font size progression defined:
There also haven’t been updates to this in more than two years. Should these be used at all in new code? Tbh I never touched the multiplier definitions as it’s difficult to define the actual final font-size. But I also don’t understand the base-font definitions. The scale defined would be:
- 13px - 14px - 15px - 17px - 19px
But when I look at actual font-sizes, the default scale in use is more or less:
- 13px - 15px - 17.25px - 22px - 26px
I see that new elements like the sidebar introduce root variables for spacing. E.g.:
That definitely makes it easier to adjust the sidebar layout. But it doesn’t translate to any other layout elements. On the other hand I don’t see foundational spacing variables being introduced that would allow for more consistent layout adjustments across the app. Is this on the roadmap in any way?
It would be great to know if there plans to move towards a more consistent and simple design system?
There seem to be just too many unrelated and standalone definitions right now, and they make it pretty difficult to build a consistent and rhythmic layout with a notion of ease (and joy ).
I understand it’s a big app with a ton of different elements. However, I just did a little test on the default latest list view:
This is a rebuild with every spacing value picked from a very simple geometrical progression (2px/4px/8px/16px/32px/64px). And font sizes from just 4 values:
It just seems design-wise there is no need for the number of unique definitions that is present across the app now?