The other libraries lacked foreground (text) color information, so I wrote this.
The generate.py
downloads & parses Material Design guidelines's color palette
in order to generate dist/_material-colors.scss
.
$color-primary: $color-blue-700;
.notice.danger {
background-color: $color-red-700;
color: $color-red-700-foreground;
}
-
Add npm dependency
npm install --save material-scss-colors # or, using yarn yarn add material-scss-colors
-
Reference SCSS part file using relative path
/* style.scss */ @import '../../../node_modules/material-scss-colors/dist/material-colors';
-
Add bower depency
bower install --save material-scss-colors
-
Reference SCSS part file using relative path
/* style.scss */ @import '../../../bower_components/material-scss-colors/dist/material-colors';
-
Copy
dist/_material-colors.scss
into your project -
Import it into your SCSS file(s)
/* style.scss */ @import 'material-colors';
Note: you usually don't want to do that, except if some colors are missing from the generated file.
We're using BeautifulSoup & python-slugify to parse Google Material Guidelines:
pip install beautifulsoup4
pip install python-slugify
Once these dependencies are installed, you can run generate.py
:
> python generate.py
# generated/_material-colors.scss created, containing 19 colors and 254 shades