Repository navigation
Scss variables #3256
Description
Activity
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.Reacted by John MolakvoæI would like to recommend to not simple use variables like
input-colororinput-backgroundorinput-border-colorbut to define a color palette and use abstract names likeprimary-foregroundprimary-backgroundsecondary-forecroundsecondary-backgroundcontrast-backgroundandcontrast-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.Reacted by Julius Knorr and John Molakvoæ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:- Transparent border
- Defined border with common variable. :)
Did you guys know that when you use @ along with a word, it sends that user an email?
Reacted by Niedermann IT-Dienstleistungen, John Molakvoæ, Felix A. Epp, alex and Jan C. BorchardtYou can add shadow and variables to z-index by importance.
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. 😉
Reacted by Morris Jobke, John Molakvoæ and Jan C. BorchardtPlease 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.@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 :)
@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.
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 😉
Fixed in #3530
Reacted by John Molakvoæ
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
feel free to suggest or add what seems to be used a lot. :)
@nextcloud/designers @jancborchardt