Scss variables

[skjnldsv]

This is part of the scss integration.
This issue has for goal to list all the recurrent variables across nextcloud.

Main: #1786
Refs: #3211, #3008 (comment), #2288

• Nextcloud color / theme main color / .primary button: #0082c9
• white background used everywhere / popover arrow / menu arrow: #fff
• input background color
• input border color
• font color
• border radius: 3px
• ...?

feel free to suggest or add what seems to be used a lot. :)
@nextcloud/designers @jancborchardt

[Henni]

Just wanted to mention (maybe worth its own issue):
It would be great to pass these SCSS variables over to CSS via custom properties.
This way apps can do whatever they want with it.

[stefan-niedermann]

I would like to recommend to not simple use variables like input-color or input-background or input-border-color but to define a color palette and use abstract names like

• primary-foreground
• primary-background
• secondary-forecround
• secondary-background
• contrast-background and
• contrast-background (...)

to abstract away the kind of usage of the variables (compare to android best practices)
This way one could simply switch from a light to a darker or a dark theme based on the same color palette (and the configurable theme-color) without redefining the color of each element.
Of course the colors itself can be in a variable, too, and inserted into the palette.

[skjnldsv]

That's exactly what was planned :)
We need to keep it simple! The scss came to me while working on the dark mode (#1692).
We need to be able to change the overall design with only a few vars! 😉

[jancborchardt]

I put in some of the default values in the original post above @skjnldsv :)

Also, I assume we use some @Darker and @lighter methods to automatically calculate the hover/focus/active states?

[skjnldsv]

Thanks @jancborchardt 💘

Right now we don't. But that's what i was working on before being unable to continue without scss on #1692.
I will probably try both of the solutions:

1. Transparent border
2. Defined border with common variable. :)

[Darker]

Did you guys know that when you use @ along with a word, it sends that user an email?

[skjnldsv]

@Darker don't you get notifications from all over github? 😂

[Espina2]

You can add shadow and variables to z-index by importance.

[skjnldsv]

@Espina2 what do you mean? as a superposition?

[juliushaertl]

I've just scanned the existing scss code and extracted all the colors we have there:

I guess we can just go with a those and use darker/lighter functions for the others. Not sure if I'm missing something but this is basically what I end up with:

@skjnldsv Have you already started implementing the variable support? If not, would you mind if i take over then. I'd like to get this in soon, because fixing the theming app for all the recent css adjustments will be a pain otherwise. 😉

[skjnldsv]

Please feel free! 😊
If you got any questions about how the suss compiler works, I'd be happy to help you!!
My initial work was creating a variable.scss file containing everything and adding it to the import controller function.

[skjnldsv]

@juliushaertl I would also like to globalise borders and stuff (inputs, app-navigation...). Since it doesn't appear in your summary, I would like to suggest you add them :)

[juliushaertl]

@skjnldsv Ok, I'll have a look.

I thought we can just start with colors for the first PR and add more stuff like borders, radius, ... afterwards. Makes it easier to review building it step by step. But I'll keep those in mind.

My plan was to add a list of variables to OC_Defaults and inject them into the SCSS compiler from there. The theming app as well as custom themes could then just overwrite those default values without any further changes.

[skjnldsv]

Don't bother adding a service in php. For the variable base, a simple scss file is enough imo.
We'll need a service when we'll start coding the theming rewriting.

Yes, start simple, the review need to be easy. I think it should be good to do a commit per variable 😉

[MorrisJobke]

Fixed in #3530