Materialize: Question: original material color names

Created on 13 Nov 2015 · 7Comments · Source: Dogfalo/materialize

Hi all, thanks for this great project!

I have a simple question: why did you implement your own color palette instead of using the spec?
Right now I'm trying to adopt a project on material-ui for react to materialize because of their inline-styles and your color naming is a bit confusing.

What is the mapping between your palette (base color, light, dark) to google's one? (that table with numbers)

UPD: Is there any possibility to switch to google's spec to be more consistent with material design?

Thanks!

question

Source

raveclassic

Most helpful comment

The project could support both naming conventions. I personally don't mind the green-lighten-2, etc.

For example

green lighten-3 === green-200 === #A5D6A7

green accent-4 === green-a700 === #00C853

blue-grey lighten-1 === blue-gray-400 === #78909C

etc.

yanickrochon on 20 Nov 2016

👍2 ❤1

All 7 comments

We initially copied the hex values exactly. The spec is updated periodically so some hex values may be off.

acburst on 13 Nov 2015

@acburst Hex values are correct, I meant only the naming: amber-100, amber-200...

raveclassic on 13 Nov 2015

👍1

Agreed, I think it's both convenient and odd that the names are like .red.lighten-5. It would nice to also have .red500 and .redA200 and so forth. When I'm referencing colors from the spec and then go to materialize I have to convert red200 to lighten-2 or is is lighten-3?

djensen47 on 19 Nov 2016

The project could support both naming conventions. I personally don't mind the green-lighten-2, etc.

For example

green lighten-3 === green-200 === #A5D6A7

green accent-4 === green-a700 === #00C853

blue-grey lighten-1 === blue-gray-400 === #78909C

etc.

yanickrochon on 20 Nov 2016

👍2 ❤1

Since the color classes are already very large when it comes to css output, we are not going to be supporting alternate naming conventions

Dogfalo on 20 Jul 2017

😕2 👎2

This is a little confusing. The Materialize naming convention _is_ an alternate naming convention.

So will you be changing to use he standard MD spec or leaving it with the current alternate convention?

djensen47 on 20 Jul 2017

I agree with @djensen47 here. The naming convention is confusing. Even though it would be a breaking change, I think switching to a schema like green-200 would make much more sense, since, as @djensen47 already pointed out, it is not always clear which materialize color is representing which color from the specs.