Implement scss variables #3530

juliushaertl · 2017-02-18T09:27:42Z

This is a basic implementation for using SCSS variables. For now I only intruduced variables for colors. We can add others for border-radius, etc. later.

fix #2288 #3256 #3211

@skjnldsv @nextcloud/designers Please have a look if it makes sense so far or if anything important is missing.

Applied to files

mention-bot · 2017-02-18T09:27:45Z

@juliushaertl, thanks for your PR! By analyzing the history of the files in this pull request, we identified @skjnldsv, @ChristophWurst and @rullzer to be potential reviewers.

skjnldsv · 2017-02-18T09:33:04Z

This is looking soooo goooood! 💟

raimund-schluessler · 2017-02-18T11:05:10Z

Sorry if this is the wrong place, but I haven't found anything in the docs or in the respective issues, so:
Can we also use SCSS for styling apps?

skjnldsv · 2017-02-18T11:08:32Z

@raimund-schluessler #3197

raimund-schluessler · 2017-02-18T11:09:55Z

Great, thanks, I should have looked in the PRs too.

MorrisJobke · 2017-02-19T02:30:53Z

Sorry if this is the wrong place, but I haven't found anything in the docs or in the respective issues, so:
Can we also use SCSS for styling apps?

Good point. @skjnldsv Can you add a note about this in the dev docs?

LukasReschke · 2017-02-20T12:31:32Z

lib/private/Template/SCSSCacher.php

@@ -114,6 +113,27 @@ private function isCached($fileNameCSS, $fileNameSCSS, ISimpleFolder $folder, $p
 	}

 	/**
+	 * Check if the variables file has changed
+	 * @param $fileNameCSS


string? potatoes? ananas? array? ;)

Hmm now I'm hungry. 😮

juliushaertl · 2017-02-20T16:25:09Z

I've now replaced all the colors with temporary variables, so we can better track which color it was before. Next step would be to reduce those values to a basic set of variables:

server/core/css/variables.scss

Lines 1 to 10 in e3a621d

    
           $color-main-text: #000000; 
        
           $color-main-text-dimmed: #555555; 
        
           $color-main-background: #ffffff; 
        
           $color-main-background-dimmed: #f0f0f0; 
        
           $color-primary: #0082c9; 
        
           $color-primary-text: #ffffff; 
        
           $color-error: #e9322d; 
        
           $color-warning: #ffcc44; 
        
           $color-success: #46ba61;

I'm not sure how we should handle the simplification of the massive amount of grey values:

server/core/css/variables.scss

Lines 21 to 43 in e3a621d

    
           $color-main-old-fafafa: #fafafa; 
        
           $color-main-old-f8f8f8: #f8f8f8; 
        
           $color-main-old-245: rgb(245,245,245); 
        
           $color-main-old-f0f0f0: f0f0f0; 
        
           $color-main-old-238: rgb(238, 238, 238); 
        
           $color-main-old-eeeeee: #eee; 
        
           $color-main-old-e8e8e8: #e8e8e8; 
        
           $color-main-old-dddddd: #ddd; 
        
           $color-main-old-220: rgb(220, 220, 200); 
        
           $color-main-old-d3d3d3: #d3d3d3; 
        
           $color-main-old-cccccc: #ccc; 
        
           $color-main-old-187: rgb(198, 198, 198); 
        
           $color-main-old-190: rgb(190, 190, 190); 
        
           $color-main-old-bbbbbb: #bbb; 
        
           $color-main-old-aaaaaa: #aaa; 
        
           $color-main-old-999999: #999; 
        
           $color-main-old-150: rgb(150, 150, 150); 
        
           $color-main-old-888888: #888; 
        
           $color-main-old-777777: #777; 
        
           $color-main-old-666666: #666; 
        
           $color-main-old-555555: #555; 
        
           $color-main-old-222222: #222; 
        
           $color-main-old-333333: #333333;

@skjnldsv Using darken/lighten function might be ok, but when it comes to theming (especially themes with inverted colors) using rgba($color-main-text, 0.1) for the different grey variations might be better. What do you think?

skjnldsv · 2017-02-20T16:39:30Z

Couldn't we set the darken/lighten functions into the variable.scss file?
So someone can easily edit this?

skjnldsv · 2017-02-20T16:41:29Z

For the grey values, we should merge what we have into simpler ones. But this could require to look exactly where they are used since they may be erroneous already. I can see someone putting a #eee right next a #e6e6e6 without seeing what he was doing on the first place :p

MorrisJobke · 2017-02-20T18:21:35Z

core/css/variables.scss

+$color-main-old-f8f8f8: #f8f8f8;
+$color-main-old-245: rgb(245,245,245);
+$color-main-old-f0f0f0: f0f0f0;
+$color-main-old-238: rgb(238, 238, 238);


Same as #eee

MorrisJobke · 2017-02-20T18:21:43Z

core/css/variables.scss

+$color-main-old-fafafa: #fafafa;
+$color-main-old-f8f8f8: #f8f8f8;
+$color-main-old-245: rgb(245,245,245);
+$color-main-old-f0f0f0: f0f0f0;


Missing #?

MorrisJobke · 2017-02-20T18:23:07Z

core/css/variables.scss

+$color-main-old-eeeeee: #eee;
+$color-main-old-e8e8e8: #e8e8e8;
+$color-main-old-dddddd: #ddd;
+$color-main-old-220: rgb(220, 220, 200);


It's not really grey, but slightly green #DCDCC8 - But I can't find any reference in the above code.

MorrisJobke · 2017-02-20T18:23:36Z

core/css/variables.scss

+$color-main-old-220: rgb(220, 220, 200);
+$color-main-old-d3d3d3: #d3d3d3;
+$color-main-old-cccccc: #ccc;
+$color-main-old-187: rgb(198, 198, 198);


MorrisJobke · 2017-02-20T18:24:02Z

core/css/variables.scss

+$color-main-old-d3d3d3: #d3d3d3;
+$color-main-old-cccccc: #ccc;
+$color-main-old-187: rgb(198, 198, 198);
+$color-main-old-190: rgb(190, 190, 190);


MorrisJobke · 2017-02-20T18:25:18Z

core/css/variables.scss

+$color-main-old-bbbbbb: #bbb;
+$color-main-old-aaaaaa: #aaa;
+$color-main-old-999999: #999;
+$color-main-old-150: rgb(150, 150, 150);


MorrisJobke · 2017-02-20T18:25:45Z

core/css/variables.scss

+$color-main-old-666666: #666;
+$color-main-old-555555: #555;
+$color-main-old-222222: #222;
+$color-main-old-333333: #333333;


Sorted list of grey values:

#222222 #333333 #555555 #666666 #777777 #888888 #969696 #999999 #aaaaaa #bbbbbb #bebebe #c6c6c6 #cccccc #d3d3d3 #dddddd #e8e8e8 #eeeeee #eeeeee #f0f0f0 #f5f5f5 #f8f8f8 #fafafa

Maybe we in a first step remove similar colours, like those:

Signed-off-by: Julius Haertl <jus@bitgrid.net>

…ackground Signed-off-by: Julius Haertl <jus@bitgrid.net>

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

codecov-io · 2017-03-20T13:44:47Z

Codecov Report

Merging #3530 into master will increase coverage by 0.07%.
The diff coverage is 60%.

@@             Coverage Diff             @@
##             master   #3530      +/-   ##
===========================================
+ Coverage     54.23%   54.3%   +0.07%     
  Complexity    21148   21148              
===========================================
  Files          1304    1304              
  Lines         80779   80782       +3     
  Branches       1282    1282              
===========================================
+ Hits          43810   43869      +59     
+ Misses        36969   36913      -56

Impacted Files	Coverage Δ	Complexity Δ
lib/private/TemplateLayout.php	`0% <0%> (ø)`	`34 <0> (ø)`	⬇️
lib/private/Template/SCSSCacher.php	`75.3% <64.28%> (+75.3%)`	`20 <0> (ø)`	⬇️
apps/comments/lib/EventHandler.php	`79.16% <0%> (-8.34%)`	`7% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 450a899...a0f7d4b. Read the comment docs.

juliushaertl · 2017-03-20T13:49:05Z

@MorrisJobke @LukasReschke @skjnldsv @nextcloud/designers Ready for review.

We can squash those commits, but I think it might be easier to trace what has changed exactly for reviewing.

MorrisJobke

Tested and works nicely 👍

LukasReschke

Works nicely :)

MorrisJobke · 2017-03-20T18:53:25Z

🎉 Thanks a lot @juliushaertl

juliushaertl added 2. developing Work in progress enhancement labels Feb 18, 2017

juliushaertl added this to the Nextcloud 12.0 milestone Feb 18, 2017

juliushaertl requested a review from skjnldsv February 18, 2017 09:27

skjnldsv added the feature: scss label Feb 18, 2017

MorrisJobke mentioned this pull request Feb 19, 2017

Document SCSS usage nextcloud/documentation#355

Closed

LukasReschke reviewed Feb 20, 2017

View reviewed changes

juliushaertl force-pushed the scss-variables branch from bbe3ef3 to e3a621d Compare February 20, 2017 16:16

MorrisJobke reviewed Feb 20, 2017

View reviewed changes

juliushaertl force-pushed the scss-variables branch from e3a621d to 1efaf0d Compare February 21, 2017 16:09

juliushaertl force-pushed the scss-variables branch 3 times, most recently from b599947 to efaefd2 Compare March 6, 2017 09:08

juliushaertl force-pushed the scss-variables branch from efaefd2 to 82bbd02 Compare March 16, 2017 10:56

Add variables.scss and import it for each scss file

2bd06e0

Signed-off-by: Julius Haertl <jus@bitgrid.net>

juliushaertl added 13 commits March 20, 2017 12:49

Remove unused old #999

51c6fcd

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Replace #222 with #333

7b5d5d1

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Use one box-shadow color

19ce637

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Merge #666 and #777 to #555

33ee6e8

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Extra variable for loading icons

8ff3db1

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Remove separate error colors

5b3a1a5

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Remove grey tints

58a9d1b

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Merge color tones aaaaaa, bebebe, cccccc in bbbbbb

c7de67e

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Remove legacy CSS

9f259d4

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Make remaining colors depending on $color-main-text and $color-main-b…

322ecdc

…ackground Signed-off-by: Julius Haertl <jus@bitgrid.net>

Replace old color occurences with calculations

7381a2e

Signed-off-by: Julius Haertl <jus@bitgrid.net>

Add tests for SCSSCacher

4fbf9a4

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Add variables.scss to sass compile test

ccd3509

Signed-off-by: Julius Haertl <jus@bitgrid.net>

juliushaertl force-pushed the scss-variables branch 2 times, most recently from f9fd812 to 1ebec0d Compare March 20, 2017 12:16

juliushaertl added 2 commits March 20, 2017 14:12

Add tests for SCSSCacher

29ec58f

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Fix sass compile tests

53c0fe6

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliushaertl force-pushed the scss-variables branch from e6b6add to 53c0fe6 Compare March 20, 2017 13:14

Fix tests

a0f7d4b

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliushaertl added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Mar 20, 2017

MorrisJobke approved these changes Mar 20, 2017

View reviewed changes

LukasReschke approved these changes Mar 20, 2017

View reviewed changes

LukasReschke merged commit 21cf1b2 into master Mar 20, 2017

LukasReschke deleted the scss-variables branch March 20, 2017 18:49

This was referenced Mar 20, 2017

Scss variables #3256

Closed

Inputs have wrong border color with theming #3211

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement scss variables #3530

Implement scss variables #3530

juliushaertl commented Feb 18, 2017 •

edited

Loading

mention-bot commented Feb 18, 2017

skjnldsv commented Feb 18, 2017

raimund-schluessler commented Feb 18, 2017

skjnldsv commented Feb 18, 2017

raimund-schluessler commented Feb 18, 2017

MorrisJobke commented Feb 19, 2017

LukasReschke Feb 20, 2017

skjnldsv Feb 20, 2017

juliushaertl Feb 20, 2017

MorrisJobke Feb 20, 2017

juliushaertl commented Feb 20, 2017

skjnldsv commented Feb 20, 2017

skjnldsv commented Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

skjnldsv Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

MorrisJobke Feb 20, 2017

codecov-io commented Mar 20, 2017

juliushaertl commented Mar 20, 2017

MorrisJobke left a comment

LukasReschke left a comment

MorrisJobke commented Mar 20, 2017

Implement scss variables #3530

Implement scss variables #3530

Conversation

juliushaertl commented Feb 18, 2017 • edited Loading

Applied to files

mention-bot commented Feb 18, 2017

skjnldsv commented Feb 18, 2017

raimund-schluessler commented Feb 18, 2017

skjnldsv commented Feb 18, 2017

raimund-schluessler commented Feb 18, 2017

MorrisJobke commented Feb 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juliushaertl commented Feb 20, 2017

skjnldsv commented Feb 20, 2017

skjnldsv commented Feb 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented Mar 20, 2017

Codecov Report

juliushaertl commented Mar 20, 2017

MorrisJobke left a comment

Choose a reason for hiding this comment

LukasReschke left a comment

Choose a reason for hiding this comment

MorrisJobke commented Mar 20, 2017

juliushaertl commented Feb 18, 2017 •

edited

Loading