Color variables override user's variables with the same name

[JoannaFalkowska]

The file discussed:
https://github.com/Dogfalo/materialize/blob/3bb2847f679b0e42f3adf4b30c04c6eb0adbbe28/sass/components/_color-variables.scss

Expected Behavior

Color variables are not overriding user's variables.

Current Behavior

Color variables are overriding user's variables.

Possible Solution

All variables, including color variables, should use !default flag.
Alternatively, color variables should be namespaced, for example with materialize_ prefix.

Steps to Reproduce (for bugs)

$red: #ff1111;
@import '../../node_modules/materialize-css/sass/components/color-variables';

(...)

.my-class {
  color: $red // bugs out because $red is now a map
}

Your Environment

• Version used: 0.100.2

[yasiupl]

Just import, then override?

[JoannaFalkowska]

If that was a solution for every possible case, !deafult wouldn't need to be a thing. Of course it's mainly a matter of convenience and clean code.

The real question here though is why Materialize decided to hijack variable names as simple and vague as $red, without !default, without thinking about how much this variable name is likely to be used by other people for other purposes. Why isn't it a $materialize-red or even $red-map? So with this bug report I'd also want to ask Materialize team to rethink this naming and this approach in general. I don't see a reason to use this kind of naming; maybe I'm missing something here. It seems weird especially since variables in the _variables file do use !default and are named much more explicitely.