design-tokens

Aprenda a instalar design tokens no seu projeto.

Instalando

Para instalar nossos tokens de design, você só precisa executar em seu projeto:

yarn add @olist/design-system-tokens
// or
npm install --save @olist/design-system-tokens

Uso

Usamos tokens em vez de valores codificados para garantir uma melhor consistência da interface do usuário e para tornar uma experiência perfeita para nossos lojistas em todos os diferentes produtos e plataformas.

Temos três camadas de tokens, sendo elas:

1. Base tokens
2. Theme tokens
3. Component tokens

TypeScript / JavaScript

Você pode importar todas as camadas de nossos tokens de design do módulo npm:

os component tokens fazem parte do objeto themes.

import { tokens, themes } from '@olist/design-system-tokens';

Sass

Basta importar o .scss da camada de token desejada e ele trará um conjunto de variáveis sass para estilizar seus elementos.

Base tokens

Importe o arquivo de "tokens":

import '@olist/design-system-tokens/sass/tokens.scss';

.example {
  color: $color-blue-100;
}

Theme tokens

Importe o tema desejado:

import '@olist/design-system-tokens/sass/themes/olist/base.scss';

.example {
  color: $color-primary-base;
}

Component tokens

Todos os component-tokens estão incluídos nos arquivos de tema, por isso, importe um arquivo de tema para poder utilizá-los.

Você pode encontrar os component-tokens disponíveis dentro da página do componente correspondente, na seção "componentes" no menu de navegação. No caso dos component-tokens de texto, eles estão na seção "tipografia" dentro de "fundamentos"

.title {
  font-size: $text-title-large-desktop-font-size;
}