8lueberry / google-material-color Goto Github PK

Hi,
it seems the description README.md, section about CSS shows incorrect pattern and usage example for the CSS version:

• The class name in the example mentions classes with "-Secondary" at the end

• Actual classes inside the palette.css do not have that suffix (except for Black and White)

• Description example:

<div class="palette-Light-Blue-700-Secondary bg">
  The background is Light Blue
  The text is White
</div>

• Palette.css declarations:

.palette-Light-Blue-700.bg {
  background-color: #0288D1;
}
.palette-Light-Blue-700.text {
  color: #0288D1;
}

As you can see from the Google Material color specs certain colors require different text colors (black or white).

It would be quite useful to have this available.

Hi,

When I attempt to call palette('Light Blue', 700); I get the error:

$result: map-get($colorMap, $shade);
          ^
      Argument `$map` of `map-get($map, $key)` must be a map

Backtrace:
	node_modules/google-material-color/dist/palette.scss:637, in function `map-get`
	node_modules/google-material-color/dist/palette.scss:637, in function `palette`

But palette('Blue', 700); works fine.

Are you aware of this? node-sass is a commonly used library.

I will post a reference to this issue there also to see if they simply don't support spaces.

Hi,
Can you please update Lodash in you dependencies?
I'm seeing one vulnerability - Lodash Prototype Pollution.
Thanks

For example: to get back rgb and rgba

I have used google-material-color on my project.

It works well, but my project base on Angular2 and TypeScript.
Once I compile my project, tsc(typscript compiler) show me the error, which say 'cannot find module ...'

Do you have any plan for typings?

in https://material.google.com/style/color.html#color-color-palette there is a "Black" palette with just a "white" entry

This seems to be missing from the list of colors in this lib

Hi,
in the README file there's an error.

@import 'palette';
...

.my-div {
  .palette('Light Blue', '700');
  background-color: @palette;

  .palette('Red'); // default shade is 500
  color: @palette;
}

In LESS you can't do this.
The @palette variable will be orverwritten by the second mixin call.
So, @palette is equal to Red color both for background-color and color assignments.