Groselha Tokens Kickstart

Instalação do projeto

1. Inicie o projeto clonando o repositório de tokens:

$ git clone https://github.com/groselha-io/groselha-tokens.git

2. Entre no diretório

$ cd groselha-tokens

3. Instale as dependências:

$ npm install

Como executar

Terminal

$ ./node_modules/.bin/theo src/tokens.yml --transform web --format scss --dest dist"

Script do package.json

$ theo src/tokens.yml --transform web --format scss --dest dist"

Scripts de exemplo no projeto

$ npm run web
$ npm run ios
$ npm run android

Explicação do projeto

O projeto de Token tem como dependencia o THEO - SalesforceUx. O THEO converte um arquivo .yaml para diversos tipos de arquivos. Por exemplo: .json, .xml, .css, .sass, .less, .js, entre outros.

Para funcionar corretamente, precisamos seguir uma estrutura base que foi determinada pela ferramenta. Você pode ver todos os detalhes no Readme.md que é uma mini documentação.

Através desta estrutura o THEO consegue identificar os tipos dos valores e converter para cada particularidade de linguagem.

Árvore de diretórios

A estrutura do projeto é bem simples, ele é divido em 3 partes principais.

groselha-tokens/
├── src/
│   ├── border/
│   ├── color/
│   ├── opacity/
│   ├── radius/
│   ├── shadow/
│   ├── spacing/
│   ├── typography/
│   └── tokens.yml
├── dist/
└── [additional files]

1. src/

É o diretório principal, aqui esta todas as categorias de tokens que você pode gerar. O ponto de entrada para o THEO é o arquivo tokens.yml.

2. dist/

Diretório dos tokens compilados. É aqui que ficam todos os arquivos de tokens versionados.

Exemplos

1. Arquivo principal

Arquivos que importamos todas as categorias de Tokens.

# src/tokens.yml
imports:
  - ./border/index.yml
  - ./radius/index.yml
  - ./color/index.yml
  - ./opacity/index.yml
  - ./shadow/index.yml
  - ./spacing/index.yml
  - ./typography/index.yml
global:
  category: tokens

2. Arquivo de tokens

São os arquivos de categorias. Esses arquivos são os que são lidos pelo THEO e através deles a ferramenta cria os nomes e os valores dos tokens.

# claro/color/brand.yml
---
global:
  type: color # Com esse valor o THEO converte as unidades
  category: category-color

imports:
  - ./aliases.yml # Importando variaveis de apelido

props:
  - name: color-brand-primary-darkest # Nome do token
    value: '{!color-red-darkest}' # Valor do token em variável
    meta:
      friendlyName: Color Brand Primary Darkest
    category: brand-color

  - name: color-brand-secondary-dark # Nome do token
    value: '{!color-yellow-dark}' # Valor do token em variável
    meta:
      friendlyName: Color Brand Secondary Dark
    category: brand-color

3. Arquivo de variáveis

Nesse arquivo criamos variáveis separadas por grupo. Podemos ter diversos arquivos desses. Cada um na raíz da sua categoria.

# src/color/aliases.yml
---
global:
  type: aliases # Atribui o valor do tipo do arquivo
  category: pallete-color

aliases:
  color-red:                '#DA291C' # Criacao da variável
  color-red-dark:           '#A61F16'
  color-red-darkest:        '#70150F'
  color-red-light:          '#E35C53'
  color-red-lightest:       '#FFB2AC'

4. Arquivo de Saída

//  groselha-tokens-0.0.1.less

@color-brand-primary = #DA291C
@color-brand-secondary = #F5B921
@color-support-success = #87D3A2
@color-support-danger = #E7574D
[...]

Tabela de valores

1. format

Nome	Valor do formato
CSS (Variáveis)	`custom-properties.css`
CSS (Módulos)	`cssmodules.css`
SCSS	`scss`
SCSS (Map)	`map.scss`
SCSS (Map Variables)	`map.variables.scss`
SCSS (List)	`list.scss`
SASS	`sass`
LESS	`less`
STYLUS	`styl`
JS (Module)	`module.js`
JS (Common)	`common.js`

2. transform

Nome	Valor de Transformação
raw	`[]`
web	`['color/rgb']`
ios	`['color/rgb', 'relative/pixelValue', 'percentage/float']`
android	`['color/hex8argb', 'relative/pixelValue', 'percentage/float']`

3. dest

Esse parâmetro escolhe qual o nome do diretório de saída dos tokens. Por padrão seu valor é dist.

Licença

MIT

guigonzalez/groselha-tokens