Tokens

Os tokens são uma maneira de guardar variáveis agnóstica de tecnologia e são, ainda, a base de um design system.

Um dos principais ganhos que temos com tokens é que abstraimos valores hardcoded em variáveis semânticas. Desta forma, não dizemos, por exemplo, que um elemento tem a cor amarelo, mas sim que tem a cor intent.warning. Assim, se algum dia decidirmos mudar a tal cor intent.warning para vermelho, para dar mais destaque, não precisamos varrer o código da aplicação inteiro fazendo a troca, basta atualizarmos a lib de tokens.

Os tokens que usamos do lado de dev também existem na camada de design. Para usá-los do lado de dev, temos a lib @loft/tokens-loft, que exporta os tokens em vários formatos, como .js, CSS and SCSS.

Usage

Como os tokens são agnósticos de plataforma, existem algumas formas de usá-los.

Javascript

Para utilizar no seu projeto javascript, basta instalar a lib @loft/tokens-loft:

E então fazer o uso:

import { color } from '@loft/tokens-loft';
const componentStyle = css({ backgroundColor: color.background.primary });

CSS & SCSS

Para utilizar os tokens via variáveis de estilo, veja a documentação de CSS e SCSS