shuhei / material-colors Goto Github PK

View Code? Open in Web Editor NEW

269.0 10.0 42.0 72 KB

Colors of Google's Material Design made available to coders

Home Page: https://shuheikagawa.com/material-colors/

License: ISC License

JavaScript 71.01% HTML 28.99%

css less sass stylus json material-design javascript

material-colors's Introduction

Material Colors

Colors from Google's Material Design made available to coders.

The colors are scraped from the guide. The idea to publish colors in multiple forms is stolen from mrmrs/colors.

Available Forms

CSS: Classes for prototyping such as .color-red-100, .bg-red-100, .border-red-100, .fill-red-100 and .stroke-red-100.
CSS variables such as --md-red-100.
Sass, Scss: Color variables such as $md-red-100.
Less: Color variables such as @md-red-100.
Stylus: Color variables such as md-red-100.
JSON: Raw data of colors. Key names are hypenated. e.g. deep-purple
JavaScript: Color set object provided via AMD, CommonJS or global variable materialColor. Key names are camelCase. e.g. deepPurple
EcmaScript module: Color variables are exported as camelCase names.

See dist directory or demo for more details.

Usage

Download

Download what you like from dist directory and use it.

Bower

bower install material-colors

and use what you like in bower_components/material-colors/dist.

NPM

npm install material-colors

material-colors's People

Contributors

Stargazers

Watchers

material-colors's Issues

Can't Import Sass Files

I used bower to install the material-colors dependency. The dist/ folder contains a file with .scss and .sass. When attempting to use sass to import the file like so:

@import '../../bower_components/material-colors/dist/colors.scss';

I get the following error:

Error: It's not clear which file to import for '@import "../../bower_components/material-colors/dist/colors"'.
       Candidates:
         ../../bower_components/material-colors/dist/colors.scss
         ../../bower_components/material-colors/dist/colors.sass
         ../../bower_components/material-colors/dist/colors.css
       Please delete or rename all but one of these files.

Can we not rename or move these files so we can import them appropriately with SASS?

Cannot fetch colors from the Material Design website

Now the doc is at https://material.io/guidelines/style/color.html but it's not reachable with https.get somehow.

Error: unable to verify the first certificate

Tried with ssl-root-cas but didn't work.

Test Fails on Windows

OS: Windows7
Node: v7.4.0
Error Message:

[...]
Error: Command failed: (my directory)\material-colors\node_modules\.bin\rollup -f es (my directory)\material-colors\test\fixtures\default-import.js | (my node dirctory)\node.exe
[...]
    at checkExecSyncError (child_process.js:490:13)
    at execSync (child_process.js:530:13)
    at (my dirctory)\material-colors\test\module.js:18:16
    at Array.forEach (native)
    at Object.<anonymous> ((my dirctory)\material-colors\test\module.js:9:10)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
npm ERR! Test failed.  See above for more details

~~Windows does not understand | command, which seems why test fails.~~
It may be good to use rollup JavaScript API instead of child_process.execSync and console.log.
[2017/02/09 update]
Windows understands | command. The problem in this case was a space in path as commented below.
Sorry for my misunderstanding.

Add js file

window.mColors = /* color.json contents */

Request: Pure JS

I'm pulling this in on my React Native project and would love just a simple JS object that I can import in. I'm converting from JSON every time. Not a big deal but I thought I would suggest it.

Cool project, thank you.

colors.es2015.js const not supported in older browser (Safari 9)

I see export const in colors.es2015.js

This causes issues in browsers like Safari 9:
SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

I'm trying to understand whether I should be using babel to transpile this module to es5 replacing const with var. I would guess that packages that get installed to node_modules would not need transpilation. I need to use strict mode. Curious how to proceed.

Any suggestions?

colors.es2015.js and colors.js have different APIs

In Babel, using export var is different than using module.exports = {}. Currently if using the es6 version you need to do import * as colors from 'material-colors' vs import colors from 'material-colors' for es5 (the latter is undefined since there's no default export).

Create tag for v1.2.6 (npm)

Please update github tag (release) to the latest release in NPM.

Trying to inline import a css file in SASS

The root cause is the same as in #7.
I want to inline import the colors.css file, and there're two problems with that.

all files are named colors, so if the file extension is omitted the name becomes ambiguous and sass throws an error
if the file name is included, however, according to sass language specification, imports that end in .css are not inlined and a normal css @import url(...); is outputted instead

As is stands right now, the only solution that works (kinda) is to rename the file before compiling.

So, the question is, could we possibly have more unique file names?

Cannot use dot-notation in javascript

Using this via javascript (es6)

import { red } from 'material-colors';

const style = {
  color: red['500'] // <-- awkwardness here
};

500 cannot be retrieved via dot-notation (i.e. red.500 is not valid javascript).

I'd like to retrieve the primary color via dot-notation: red.primary. I think it only makes sense for the primary color (as named by google).

What do you think?

Missing text color (w/b) for each background fill color.

Hi,
one important piece thats missing here are the foreground colors (at least not present in the JSON file).