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';

CSS custom properties

Os tokens também são distribuídos como CSS custom properties (variáveis CSS), que são a base do tema dos componentes. Importe o arquivo index.css uma vez na entrada da aplicação:

import '@olist/design-system-tokens/css/index.css';

O index.css inclui os tokens primitivos, declarados em :root, e o tema padrão olist/base. Os tokens de tema e de componente são declarados sob o seletor [data-ds-theme="<brand>-<variation>"], aplicado automaticamente pelo ThemeProvider do pacote @olist/design-system.

.example {
  color: var(--ds-color-primary-base);
}

Temas não-padrão

Como o index.css inclui apenas os primitivos e o tema olist/base, temas diferentes do padrão (erp, erp-dark) exigem um import adicional do CSS do tema desejado:

import '@olist/design-system-tokens/css/themes/erp/base.css';

CSS dos componentes

Se sua aplicação utiliza o pacote de componentes @olist/design-system, também é obrigatório importar o CSS dos componentes na entrada da aplicação, junto com o CSS dos tokens:

import '@olist/design-system/styles.css';

E, caso utilize o pacote @olist/templates:

import '@olist/templates/dist/styles.css';

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;
}