(Not technically an #app as such unless you count HTML and CSS as a programming language but this category is probably the closest fit I can think of with the intention of this little project)
So this is a small project I've been working on mostly for selfish reasons:
To practice and play with HTML, CSS and SASS
To help with my own research into Joplin theming
This is a very, very, very basic and early iteration that only shows basic colours. There are plans to add other areas, the iconography + typography areas in particular as well as reusable UI elements.
The raw files contain comments with more data like the root theme elements that match as well as examples of each element in use within the application.
More information is in my GitHub where I'm storing this stuff.
Let me know what you think? Worth continuing and adding the occasional update here? I'll probably add to it in the background either way for my own purposes.
Below are a couple of small snips of it, but it is definitely not exhaustive or finished (the repo has a todo list of the endless things that I would still need to / want to add).
So I've updated it a bit since the initial version. Originally I was trying to identify different uses of things in the application but that just led to a huge mess of names and I couldn't work out where to go next.
So I've redone the classification entirely and based it off the default joplin style code instead with the idea to try and classify it in a more "atomic" way so that the later components can be identified using those base classes.
I've also added a font section which needs an awful lot of work still. Just in the default application (without taking into account all the font sizes (other than the plain/default) within the actual notes themselves) I have identified 15 unique font styles (combinations of font-family, font-size, font-weight and font-style) but I'm yet to fully work out which fonts are inherited on different systems over others.
Those combinations don't take into account the colour - not even within the light theme which is the only one I'm targetting for the moment with the dark theme to come once I can figure just one out.
If you are interested in what is used where I have listed examples in comments in the html file against each of the divs for the font lines.
Indeed, this is part of what I'm trying to find because at first view you might not notice some of them but what I would like to get to is a point where certain uses can be identified for unification under a single font variable rather than them being defined separately but I'm a long, long way from that yet.
Nope, I'm somewhat masochistically going to attempt the whole shebang, its just that so far all I've managed to document are desktop base colours (and I don't even have some of the custom ones not defined on root for those yet) as well as the fonts. This is actually why it has a section container of "Joplin Desktop" precisely so I can go on and reuse the CSS + HTML for mobile + website.
The guide itself uses the montserrat font as a nod to tie in with the Joplin website maybe as its unifying font style, its identity. Same thing goes with the Welcome screen I made, using the website as a baseline for the brand identity and trying to base things on that. (The rest of the guide doesn't follow this yet as I just wanted some basic containers, prettying up can come much later).
For information, the 16px font has now been removed, and replaced with 13px, which should make the font sizes a bit more consistent.
By the way did you keep track of where you saw these fonts? I guess some are very common, like the 13px one, but others perhaps only appear once or twice, in which case we could try to change them to something more standard.
I can think of worse ideas but is there enough "meat" there for a project? (bear in mind this project has mostly come from dev tool element inspection rather than digging through the source code so I don't have a good grasp of the extent of this.
Eventually I'd like to get to a point with this where this could start to be reduced to the point where one could define an actual design system/pattern library/design languague (whatever the actual technically correct term is) with modular and reusable elements (i.e. modal dialogs have x font, y buttons in z layout) which would have the benefit of making life easier (and more consistent) for all kinds of things - new ui features, plugins, "third party" apps & tools, theming support etc.
Yes that would be too little for a full project, but I meant a mini project, so more like a first pull request so that the student can get used to the code base. I guess we could simply create an issue with the "Good first issue" label for it.
That would definitely be useful, and would also inform future design updates because a designer could start from that document to get an overall view of the design system.