KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

google-material-color

★ 164 Open GitHub ↗

Google material color for SASS, LESS, Stylus, CSS, JS, etc

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# google-material-color

[![GitHub version](https://badge.fury.io/gh/danlevan%2Fgoogle-material-color.svg)](http://badge.fury.io/gh/danlevan%2Fgoogle-material-color)
[![npm version](https://badge.fury.io/js/google-material-color.svg)](http://badge.fury.io/js/google-material-color) [![Bower version](https://badge.fury.io/bo/google-material-color.svg)](http://badge.fury.io/bo/google-material-color)

[Google material color](http://www.google.com/design/spec/style/color.html#color-color-palette) implementation for Sass, Less, Stylus, CSS and JS.

> This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
([http://www.google.com/design/spec/style/color.html](http://www.google.com/design/spec/style/color.html#color-color-palette)).

See the [demo](http://danlevan.github.io/google-material-color/test/) generated by the tests.

## Installation

* Download the files you need from the [dist](dist) directory:
  * Stylus:  [palette.styl](http://danlevan.github.io/google-material-color/dist/palette.styl)
  * Less:  [palette.less](http://danlevan.github.io/google-material-color/dist/palette.less)
  * Sass (SCSS) 3.3+:  [palette.scss](http://danlevan.github.io/google-material-color/dist/palette.scss)
  * CSS:  [palette.css](http://danlevan.github.io/google-material-color/dist/palette.css)
  * CSS variable:  [palette.css](http://danlevan.github.io/google-material-color/dist/palette-var.css)
  * JS:  [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) supports (AMD, node, browser)
* NPM: `$ npm install google-material-color --save`
* Bower: `$ bower install google-material-color --save`
* Git: `$ git clone git://github.com/danlevan/google-material-color.git`

## Colors

Details can be found on the [google design specs website](http://www.google.com/design/spec/style/color.html#color-color-palette).

**Colors**
> Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey

**Shades** (note that not all color have all the shades)
> 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, A100, A200, A400, A700

**Text Colors**
> White, Black

**Text Shades**
> Primary, Secondary, Icons, Disabled, Hint, Dividers

## Usage

### Stylus

Import [palette.styl](http://danlevan.github.io/google-material-color/dist/palette.styl).

Call the function `palette('[color]', '[shade]')`.

> The shade is optional (500 is the default shade).

Call the function `paletteText('[color]', '[shade]', '[textShade]')`.

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

`example.styl`

```stylus
@import 'palette'
...

.my-div
  background-color palette('Light Blue', '700')
  color paletteText('Red', '700', 'Secondary')

.my-default-div
  background-color palette('Light Blue') // default shade is 500
  color paletteText('Red') // default text shade is Primary
```

> If you need direct access to the variables, you can access it like `$palette['Light Blue']['500']` and `$palette[$paletteText['Light Blue']['500']]['Primary']`

### Sass (SCSS)

Import [palette.scss](http://danlevan.github.io/google-material-color/dist/palette.scss).

Call the function `palette([color], [shade])`.

> The shade is optional (500 is the default shade).

Call the function `paletteText([color], [shade], [textShade])`.

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

`example.scss`

```scss
@import 'palette';
...

.my-div {
  background-color: palette(Light Blue, 700);
  color: paletteText(Light Blue, 700, Secondary);
}

.my-default-div {
  background-color: palette(Red); // default shade is 500
  color: paletteText(Light Blue); // default text shade is Primary
}
```

> If you need direct access to the variables, you can access it through a map like `$colorMap: map-get($palette, Light Blue); $color: map-get($colorMap, 700);` and `$colorMap: map-get($paletteText, Light Blue); $textColor: map-get($colorMap, 700); $colorMap: map-get($palette, $textColor); $color: map-get($colorMap, Secondary);`.

### Less

Import [palette.less](http://danlevan.github.io/google-material-color/dist/palette.less).

Call the mixin `.palette([color], [shade])`.

> The shade is optional (500 is the default shade).

Call the mixin `.palette-text([color], [shade], [textShade])`.

> The shade is optional (500 is the default shade). The textShade is optional (Primary is the default textShade).

`example.scss`

```less
@import 'palette';
...

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

// get @palette in its own scope otherwise @palette will be overwritten
  &{
    .palette('Red'); // default shade is 500
    color: @palette;
  }
}

```

If you need access to the variables, you can access it through variable like `@palette-Light-Blue-500` and `@colorVar: %('palette-%s-Secondary', @palette-text-Light-Blue-500); @color: @@colorVar`

### CSS

Include [palette.css](http://danlevan.github.io/google-material-color/dist/palette.css) in your html. The CSS class follows the pattern `palette-[color]-[shade]-[textShade]`, (spaces replaced by `-`).

The CSS provides colors for the background and text

* `background-color`: by adding the `bg` class to the element
* `color`: will be White or Black if adding the `bg` class to the element; will be the color setted if adding the `text` class (does not support textShade) to the element

`example.html`

```html
<link href='palette.css' rel='stylesheet' type='text/css'>
...

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

<div class="palette-Light-Blue-700 text">
  The text is Light Blue
</div>
```

### CSS variable

If you're using cssnext, this project also includes a variable files for css. Read more here [Custom properties](http://cssnext.io/features/#custom-properties-var).

Include [palette.css](http://danlevan.github.io/google-material-color/dist/palette-var.css) in your html.
```css
:root {
  --palette-Red-50: #FFEBEE
  --palette-Red-100: #FFCDD2
  --palette-Red-200: #EF9A9A
  ...
  --palette-Red-Primary: #ffffff;
  --palette-Red-Secondary: rgba(255,255,255,0.7);
  ...
  --palette-Red-50-Primary: #ffffff;
  --palette-Red-50-Secondary: rgba(255,255,255,0.7);
  ...
```

### JS

You can import the [palette.js](http://danlevan.github.io/google-material-color/dist/palette.js) file in Node.js, and AMD module or the browser.

`example.html`

```javascript
<script src='../dist/palette.js'></script>
...

## Issues

Search or open new issues [here][issues].

If you would like to suggest improvements or other libraries, you can also open an issue.

## Contributing

See the [contributing](CONTRIBUTING.md) doc

## Release History
See the [changelog](CHANGELOG.md)

## License

Licensed under [MIT](LICENSE).

Google material design [Terms](http://www.google.com/design/spec/style/color.html).

[issues]: https://github.com/danlevan/google-material-color/issues "GitHub Issues for Less.js"
[download]: https://github.com/less/less.js/zipball/master "Download Less.js"

google-material-color

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README