List of all possible color combinations / stylesheets #1206
Comments
It shouldn’t 😄 That’s a case I forgot to eliminate. AFAIK primary and accent color have to be distinct.
Where do you get that idea from?
No, we don’t have an explicit list. The snippet you pasted actually says it best: var COLORS = ['Cyan', 'Teal', 'Green', 'Light Green', 'Lime',
'Yellow', 'Amber', 'Orange', 'Brown', 'Blue Grey',
'Grey', 'Deep Orange', 'Red', 'Pink', 'Purple',
'Deep Purple', 'Indigo', 'Blue', 'Light Blue'];
var FORBIDDEN_ACCENTS = ['Blue Grey', 'Brown', 'Grey'];Choose two colors from HTH |
Um, not sure now. Maybe color picker allowed it before? Disregard now. The picker at http://www.getmdl.io/customize/ now does follow the However, https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-teal.min.css still exists. Will that be deleted or will it just not exist for v1.0.2 and future versions? Thanks. |
|
@cliffordp What exists now, exists. We can't remove it. The changes will take effect with the next version push. |
|
Now I’m really curious if people have been downloading the unofficial color combinations. |
|
FYI just for my own curiosity and to share... There are 240 "valid" color combinations (listed below): |
|
I'm not really understanding, does this all mean that for example indigo-blue_grey is forbidden or discouraged in the material design spec? If not why is this not available in the customizer at https://getmdl.io/customize/index.html ? |
|
What would make you think |
|
because https://code.getmdl.io/1.3.0/material.indigo-blue_grey.min.css is 404 whereas e.g. https://code.getmdl.io/1.3.0/material.blue_grey-indigo.min.css is not what I need is the former |
|
That's an odd one. Not sure exactly why it isn't allowed. Could be something the spec doesn't allow or could be a bug in the contrast math happening. You can always download and build your own version from the source with the colors you want. |
|
Well, it can only either be a bug or the spec.. I posted on this thread with the hopes of narrowing down which of these two it is so that if it is the former then we can open a separate issue for it. I'd be surprised if I am the only one who has ever wanted that color combination, let alone the only one who will ever want it. |
|
MDL is no longer being maintained by the core team so much. We are focusing on Material Components for Web (previously MDLv2) and MDL is primarily up to community members to handle at this point. A color combination, possible bug, with the color picker is a non-critical issue. If someone really wants it, they can do a manual build with the colors. I have a feeling the a11y contrast is the problem here and that is why it is a discouraged color setup. Remember, in reality you can use whatever colors you want. The palettes provided are just examples build to work well together in most cases. |
|
thanks for pointing me to Material Components. I was unaware. appreciate it |
|
Is there a link to find out more about Material Components for Web (previously MDLv2) ? |
|
Javascript array |
I know about the color wheel at http://www.getmdl.io/customize/ and I did some playing around on my own outside of it.
I discovered that setting primary and secondary colors to the same is apparently OK, although the color wheel does not allow picking/previewing this.
Examples:
teal-tealexists: https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-teal.min.css even though it's not selectable via the color wheelteal-browndoes not exist: https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-brown.min.css which makes sense since it's disallowed on the color wheelbrown-browndoes not existI found https://github.com/google/material-design-lite/blob/master/docs/_assets/customizer.js#L74-78:
But it wasn't clear to me, since
Brownis allowed as secondary/accent ifOrangeis the primary.If it helps, here's a list of all the existing / "valid" color combos for v1.0.1 CSS files, as of today:
Please advise:
The text was updated successfully, but these errors were encountered: