Récupérer facilement les couleurs

[kosssi]

Actuellement on ajoute dans chaque projet ses propres variables JS pour les couleurs alors que l'on a un référentiel dans palette.styl.

Nous devrions pouvoir récupérer facilement une variable :

import palette from 'cozy-ui/palette.json'
import { Icon } from 'cozy-ui/react'
<Icon icon='album-add' color={palette['cool-grey']} />

Proposition:

1. Continuer comme on fait
2. Créer rapidement des variables dans un fichier JS (du coup duplication des variables js/stylus)
3. Créer un palette.json avec les variables puis les importer dans stylus et dans un fichier JS

[ptbrowne]

Related : webpack-contrib/stylus-loader#163 (comment)

" Like the old quoted comment, I think its best to use stylus's json function to import variables from a json file that can easily be shared with js and other systems."

palette.styl could use the json function from stylus

http://stylus-lang.com/docs/bifs.html#jsonpath-options

[kosssi]

Je vote pour le 3

[gregorylegarec]

Au sein de <Icon />, comment est ensuite gérée cette couleur ?

[ptbrowne]

import palette from 'cozy-ui/palette.json'

<Icon color={ palette['dodger-blue']} />

[y-lohse]

De notre côté, on n'utilise pas les couleurs sous forme de variable js à ma connaissance. Ceci dit la solution 3 semble effectivement la plus pertinente.

[GoOz]

Ah putain, je savais même pas que Stylus traitait du json comme ça. Bref du coup, la 3 me convient très bien.

[CPatchane]

Would it be possible to also expose all palette colors as css variable? It will avoid to do this kind of trick when we don't want to use stylus : https://github.com/cozy/cozy-store/blob/master/src/styles/palette.styl

[kosssi]

Voici un exemple sur cozy-bank : https://gitlab.cozycloud.cc/labs/cozy-bank/commit/d48a6a3ae09eba4926fb4599f12f36711fa8b5ca

[ptbrowne]

@CPatchane : please open another issue for this :) I will do the JSON trick and have a PR soon :)