Adding variables for colors and @media queries

[laisfrigerio]

Proposed Changes

• Added _colors.scss file into src/styles;
• Added _colors.scss file into website/styles;
• Added css colors into variables;
• Added @media queries into variables;

Colors are named as ‘color-XX’ (for ex. blue-100), while the ‘XX’ number represents different shades

[vitorhugomattos]

hi! thanks for your PR! it looks like your code brought up an error in our codebase and so the Sass compiler is not able to compile the library code. can you fix it so I can merge your branch? just change the line 42 in gulpfile.js (source should be ./src/styles/megadraft.scss). I also noticed that you forgot to create the variable for black color in the new library colors partials file and this is also preventing the compilation.

[laisfrigerio]

Hi, @vitorhugomattos Sorry for to late. I fixed the gulpfile.js and added $black variable into _colors.scss file. If something is still incorrect, please, let me know.

[marcelometal]

Hi @laisfrigerio,

There are other variables, such as:

• https://github.com/laisfrigerio/megadraft/blob/sass-variables/src/styles/toolbar.scss#L116
• https://github.com/laisfrigerio/megadraft/blob/sass-variables/src/styles/modal.scss#L70
• https://github.com/laisfrigerio/megadraft/blob/sass-variables/src/styles/media.scss#L14

You can use something like the command line below to find the missing variables:

for X in $(find . -name "*.scss"); do echo $X; grep color $X | grep -v \\$; done

[marcelometal]

Thank you @laisfrigerio and @vitorhugomattos ! =)