Catppuccin themes

[mrblomblo]

Added the four Catppuccin color palettes as themes:

• Catppuccin Mocha
• Catppuccin Macchiato
• Catppuccin Frappé
• Catppuccin Latte

They aren't selectable in the installer, but I noticed that the Solarized theme isn't either.
The only difference between the theme CSS files are the color codes, other than that, they are identical.

Screenshots

Mocha:

Macchiato:

Frappé:

Latte:

Known Issues

• The red outline for the "Failed to send request to server" error popup is not styled. I could not find it anywhere I looked.

Licenses & Sources

• Background image (MIT): https://github.com/zhichaoh/catppuccin-wallpapers/blob/main/patterns/line_icons.png
• Palette (MIT): https://github.com/catppuccin/palette

Edit: Added two missing letters

[mrblomblo]

I just noticed that slightly yellow line at the top of all the screenshots. That is not visible when using any of the themes, and I assume it is an artifact I missed from me removing the "backends loading" bar with inspect element for the screenshots.
edit: nvm, I am dumb. It was just from my browser image viewer...

[mcmonkey4eva]

I crossported the .model-block img fix to the main stylesheet, the /* Custom background */ I simplified to just a var replacing the background image modern.css already uses.

[mcmonkey4eva]

Why are these modified at all? These are not really intended as themed colors, they're intentionally specific.

[mrblomblo]

Ah, I didn't know they were meant to be specific colors. I'll remove the styling for them

[mcmonkey4eva]

This is over-broad

I don't think this is meant to happen?

Also checkboxes get a funky border from this too. You probably want just type=text for input?

[mrblomblo]

Thanks, I'd missed that. Yes, type=text is what I wanted to style

[mcmonkey4eva]

this is wacky and shouldn't be here. If you have colors that aren't properly controllable by the normal color stuff, you should PR a fix to the relevant button(s) and global stylesheet, rather than patching it exactly only within the confines of this particular theme.

[mcmonkey4eva]

A lot of weirdly specific targeted changes, probably shouldn't be defined in a theme file

[mcmonkey4eva]

This ... just breaks the status bar I'm pretty sure, wtf?

[mrblomblo]

...The status bar has colors other than yellow? My bad, I'll remove it

Edit: Ah, I see now that it at the very least also has red

[mcmonkey4eva]

The themes look great, but the css has a lot of strange modifications. The two that you explained with comments I ported, but the rest I'm not sure what the intentions of were.

Any color overrides outside the root block that need to stay, should use vars and be put in a ctp_base.css to avoid the duplication

[mrblomblo]

Thank you! Yes, I made a bunch of modifications so the theme would be as consistent as possible across the UI (as few unthemed elements as possible).

Any color overrides outside the root block that need to stay, should use vars and be put in a ctp_base.css to avoid the duplication

I assume I should reference ctp_base.css in WebServer.cs, not import it through the theme files?

[mcmonkey4eva]

yes add it to the webserver registered list of css files, after modern and before the specific color variant

[mrblomblo]

The new --noise-image var is good, but I don't think it works that well in the bar between the bottom elements and the top elements with the background image I chose. Personally, I think having the regular noise be applied there, and then having the custom background image everywhere else would look better

[mrblomblo]

I have now addressed the things that needed to be fixed.

The thing that I am the most unsure about is the background image, as I removed it from the middle bar due to it not working that well with the pattern (see comparison below). Though, this is probably mostly just my personal taste, and I have no problem reverting the change if you prefer it the other way!

[mcmonkey4eva]

nl@eof

[mcmonkey4eva]

There's still a bunch of overly specific !important overrides that seem like they should be edits to the main stylesheets, not confined to these themes in particular

[mrblomblo]

Sooo, should I remove all styling that requires an !important from ctp_base.css? Not sure if I understand correctly, as even some default vars require !important to change, such as --range-track-color and --star.

By "main stylesheets", do you mean modern.css, or are there other stylesheets that I've missed?
If I do edit said main stylesheet(s), should I create a separate PR, or do it in this one?

Edit: Added missing letter

[mcmonkey4eva]

mainly site.css and genpage.css, but also modern.css if needed.
You can include relevant edits in the same PR, that's fine. Separate is fine too if you prefer.

Generally, the idea is: anything under themes should seek as much as possible to just be colors, and only be anything else when absolutely necessary. The existence of modern.css is a big wall of tech debt (any time I'm working on a Swarm update that touches css, I have to deal with the fact that multiple different files have multiple different versions of the css and go back and forth testing -- it's a pain. As much as possible I don't want more of that). Any time you're messing with bootstrap codes, or you're overriding specific things... that's usually a case of something didn't have appropriate vars available, so those should just be added. A theme file should ideally work such that we can all forget it exists for the next 3 years straight, and after those 3 years and all of Swarm's updates in between, it still works. Some exceptions that require maintenance are allowable, but there should be a good reason why this theme looks better with it this way and every other theme does not.

You've been just overriding things to make it work, which in a lot projects is the way to go (especially in the chaotic AI space tbh) -- but the nice thing about Swarm, is, it's an actively developed foss project that eagerly takes PRs, and you're welcomed to just go fix any bugs in the main code that are in your way. So rather than "jank it to make it work", the goal is "do it properly, as if you were the person in charge".

[mrblomblo]

I see, thank you for the detailed response! I'll see what I can do to make this work :)

[mrblomblo]

For clarification; for example, in site.css, there is the following:

.backend-errored {
    border: 1px solid #ff0000;
}
.backend-disabled {
    border: 1px solid #ffaa00;
}

Do you mean that if I want to style those colors, I should do the following in site.css:

:root {
    /* -- pre-existing vars -- */

    /* Back-end status colors */
    --backend-errored-color: #ff0000;
    --backend-disabled-color: #ffaa00;
}

/* -- pre-existing styling -- */

.backend-errored {
    border: 1px solid var(--backend-errored-color);
}
.backend-disabled {
    border: 1px solid var(--backend-disabled-color);
}

/* -- rest of styling -- */

And then assign my own styled colors to said vars from my theme files? I.e., have as few hardcoded colors as possible (or none at all) in the main stylesheets, so they are all easily editable vars?

If this is the case, then I probably won't do that to all hardcoded colors, and only do the ones relevant to my themes. If I have the time, I could probably do all the ones that aren't relevant to my themes in another PR some other time.

Sorry for all the questions; I want to make sure I don't waste time doing something incorrectly.

[mcmonkey4eva]

yes

[mrblomblo]

I ended up doing the full site.css* as I want the themes I wrote to style as much as possible of the UI. I hope the variable names, locations, etc. are acceptable. The thing I am most unsure of is the following block, as it feels like it could be optimized, but I don't want to limit future theme creators either:

    --backend-edit-btn-text-color-hover: #000000;
    --backend-edit-btn-border-color-hover: #000000;
    --backend-edit-btn-text-color-disabled: #505050;
    --backend-edit-btn-border-color-disabled: #505050;
    --backend-delete-btn-text-color-hover: #000000;
    --backend-delete-btn-border-color-hover: #000000;
    --backend-save-btn-text-color-hover: #000000;
    --backend-save-btn-border-color-hover: #000000;

*At least I think I didn't miss anything

[mrblomblo]

Since this isn't related to my themes, maybe I should've created a separate PR for this, but I rounded the sharp corners for the toast-flash animation as they have been bothering me for way too long. I can revert this change if the sharp corners are intended.

(big batch of commits coming soon, with this being one of them)

Edit: Didn't know commits would show up in the correct spot in the PR discussion... Either way, this is the commit: fdc3e05

[mrblomblo]

I feel done for today, been working for a bit too long with few breaks.

I sincerely hope that I haven't overstepped and made changes that I wasn't supposed to make. Likewise, I also hope that the variable names I chose are appropriate and clear.

I'm no expert at CSS, so there are probably ways that I can't think of to get the stuff in ctp_base.css to work without needing them to be specific overrides in said file.

[mrblomblo]

I have compared the themes (Modern Dark/Light, the Legacy themes, etc.) in this branch with the main branch after all the changes I made. The only difference I noticed was the language dropdown menu, which now is themed correctly with all themes.
Example (Punked (Legacy) theme):

Relevant: https://discord.com/channels/1243166023859961988/1243185862234210389/1407104437410857104
But I thought I'd mention this here in the PR as well since it is relevant to it.

Edit: Forgot a few words

[mrblomblo]

The only difference I noticed was the language dropdown menu, which now is themed correctly with all themes.

btn-secondary is also themed now. This means a slight change in the default color on Modern Dark, and a more noticeable change on Modern Light, but makes all themes more consistent.
See comparison of with/without the change in the Swarm Punk theme:

[mrblomblo]

I want to clarify that I made these modifications so the Catppuccin themes would look better, the other themes being affected (in a positive way (in my view)) is just a side effect, and the before/after comparison screenshots of other themes are to give an idea of how they are affected by the changes... apart from fdc3e05, which I will happily revert and move to #966 if needed.