vindi-ds-tokens v1.1.2

DS Repositories Tokens

Essa aplicação auxilia na centralização os tokens para a Vindi, possibilitando a distribuição para diversas plataformas.

Gerar os arquivos distribuidos:

style-dictionary build

Publicando na AWS

npm run deploy

Atualmente mantemos duas distribuições: SCSS e JavaScript/Modules (commonsjs)

Organização dos tokens

Token: bloco -> elemento -> modificador

Onde o bloco é a pasta, os elementos são o nome dos aquivos e os modificadores ficam dentro dos arquivo.

Organização das pastas

properties
├── border
│   ├── radius.json
│   └── width.json
├── color
│   ├── brand.json
│   ├── functional.json
│   └── ui.json
├── effects
│   ├── opacity.json
│   └── shadow.json
├── padding
│   ├── inset.json
│   └── squish.json
└── typography
    ├── font.json
    ├── letterspacing.json
    └── line.json

Organização dos arquivos

A organização das pastas se assemelha com a organização dentro do arquivo, onde a raíz do JSON fica o bloco, depois os elementos e em seguida os modificadores.

{
    "border": {
        "radius": {
            "none": { "value": "0px" },
            "micro": { "value": "4px" },
            "small": { "value": "8px" },
            "medium": { "value": "16px" },
            "lg": { "value": "24px" },
            "pill": { "value": "100px" },
            "circular": { "value": "50%" }
        }
    }
}