Design Tokens

Como executar

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.

design-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.