npm package: @komposit/colors
Description: colors of Decathlon, in various formats, for your front-end project
Latest version: 2.1.7
Deprecated: Package no longer supported.

# `@komposit/colors`

[![npm](https://img.shields.io/npm/v/@komposit/colors)](https://www.npmjs.com/package/@komposit/colors)

> Official colors of Decathlon

## About

TODO : 

Parse each color svg thumbnail, get the color name and the color value into a json file.

This npm package exposes the canonical colors of Decathlon in various front-end formats : JSON, CSS, LESS, SCSS.

## Usage

Install the package 

```sh
npm install @komposit/colors
```

Use it according to your needs (you may have to configure your tools to consume things from your `node_modules` directory).

```
// in JS :
import * as colors from '@komposit/colors/colors.json'
// in Less :
@import "@komposit/colors/colors.less"
// in SCSS 
@import "@komposit/colors/colors"
```

### Recommendation

When possible, we encourage you to consume the `ui-kit` instead of directly consuming the `colors` assets.
It contains some operations that are recommanded when using colors variable for example.

If you are obliged to consume the `colors`, we advise you to remap colors onto descriptive/semantic names according to your context usage :

```less
// Example using less syntax
// @descriptive_name: @kit-[color]
@primary: @kit-blue-1;
```

## Color names

<!-- generated:colors-list:start -->

<div class="komposit-colors-list"><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#0082C3"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-blue-1</code></span> - <code>#0082C3</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#0F79B5"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-blue-2</code></span> - <code>#0F79B5</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#004061"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-blue-3</code></span> - <code>#004061</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#FE5800"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-orange</code></span> - <code>#FE5800</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#E53935"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-red</code></span> - <code>#E53935</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#02BE8A"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-green-1</code></span> - <code>#02BE8A</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#30A47D"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-green-2</code></span> - <code>#30A47D</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#FFEA28"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-yellow</code></span> - <code>#FFEA28</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#262628"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-5</code></span> - <code>#262628</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#6A6B6D"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-4</code></span> - <code>#6A6B6D</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#B6B6B9"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-3</code></span> - <code>#B6B6B9</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#E9EBED"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-2</code></span> - <code>#E9EBED</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#F5F5F6"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-1</code></span> - <code>#F5F5F6</code>
</div><div class="komposit-colors-list__color" style="margin:1em 0 1em 0;float:left;"><svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="#FFFFFF"><rect id="Rectangle" x="0" y="0" width="35" height="35"></rect></g></svg>
<span class="komposit-colors-list__color-name"><code>kit-grey-0</code></span> - <code>#FFFFFF</code>
</div></div>
<hr style="clear:both;">
<!-- generated:colors-list:end -->