README
Meiuca Tokens Kickstarter
Instalação do projeto
1. Inicie o projeto clonando o repositório de tokens:
git@github.com:meiucadesign/create-tokens.git
2. Entre no diretório
$ create-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.
xp-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
// xp-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