Improve css-variables support in sass files about materialize

[LoganTann]

fixed in #213

[bugy]

@DanielRuf would such change make sense?
To be honest I don't know who is responsible now for making decisions on the direction of project development

[DanielRuf]

@materializecss/members

[Pierstoval]

I think this might be overkill to introduce new shades for every usage of color functions, but I agree that this might be a good solution.

I feel like this is somehow automatically feasible as long as we keep only 5 lightening and 5 darkening shades for every color.
However, this might bloat the final code a bit more...

[doughballs]

I’m not sure how helpful I can be with regards to colours as my preference would be to remove them altogether! No project needs access to so many colours. I actually strip out all but the base colours in my projects, and even that is bloated. In truth? We receive briefs that will choose colours outside of the ones provided my materialize, and so for some they will always be redundant.

As for removing colour functions from style, I don’t know about the knock on effects but I think I’m in favour!

[Pierstoval]

@doughballs I just made a suggestion on #54 about removing colors 😉

[doughballs]

@doughballs I just made a suggestion on #54 about removing colors 😉

Haha great minds!

[bugy]

Thanks for the quick response:

I run a regex match for color functions in scss folder, and these are results:

_buttons.scss:60:    background-color: darken($button-raised-background, 10%);
forms/_switches.scss:60:    background-color: transparentize($switch-bg-color, .85);
forms/_switches.scss:73:  background-color: transparentize($switch-bg-color, .85);
forms/_range.scss:98:  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
forms/_range.scss:129:  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
forms/_range.scss:160:  box-shadow: 0 0 0 10px rgba($radio-fill-color, .26);
_tabs.scss:50:        background-color: transparentize($tabs-underline-color, .8);
_tabs.scss:60:      color: rgba($tabs-text-color, .7);
_tabs.scss:73:      color: rgba($tabs-text-color, .4);
_sidenav.scss:62:    &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
_timepicker.scss:103:	background-color: transparentize($secondary-color, .75);
_dropdown.scss:71:    background-color: darken($dropdown-hover-bg-color, 8%);
_global.scss:650:    background-color: lighten($progress-bar-color, 40%);

May be as a quick solution (because #54 will take some time, especially due to potential regression issues), we can refactor only these colors?

[bugy]

Hi @doughballs @Pierstoval I created a PR (#55). If you would have time for review and discussion, it would be awesome