theme provider

Configure temas predefinidos ou personalizados e mantenha a compatibilidade com styled-components quando necessário.

uso

O ThemeProviderV2 recebe um objeto de tema e permite utilizar os tokens predefinidos ou personalizados da aplicação.

Na v3, os componentes são estilizados com CSS variables. Importe o CSS dos tokens e dos componentes uma vez na entrada da aplicação:

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

Se sua aplicação também utiliza o pacote @olist/templates, importe o CSS dele na entrada da aplicação:

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

quando o provider é opcional

O index.css aplica o tema padrão olist/base em :root. Por isso, aplicações que usam somente esse tema não precisam envolver a árvore com um provider:

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

const App = () => <main>...</main>;

Utilize um provider quando precisar selecionar outro tema, aplicar temas em escopos diferentes, fornecer um objeto de tokens personalizado ou fazer os hooks do design system refletirem um tema diferente do padrão.

ThemeProviderV2

Utilize a propriedade theme para fornecer o objeto de tokens. Ao selecionar um tema diferente do padrão, importe também seu arquivo CSS:

import { ThemeProviderV2 } from '@olist/design-system';
import { themes } from '@olist/design-system-tokens';
import '@olist/design-system-tokens/css/index.css';
import '@olist/design-system-tokens/css/themes/erp/base.css';
import '@olist/design-system/styles.css';

const App = () => (
  <ThemeProviderV2 theme={themes.erp.base} themeName="erp" variation="base">
    ...
  </ThemeProviderV2>
);

Os valores recebidos são disponibilizados como CSS variables no escopo do provider. As propriedades opcionais themeName e variation identificam esse escopo no atributo data-ds-theme.

Temas disponíveis: olist, erp e erp-dark.

aplicações com styled-components

O design system não depende mais de styled-components. Os imports do pacote principal não adicionam o tema ao contexto do styled-components da aplicação.

Se a aplicação possui componentes próprios que acessam tokens por theme.olist.*, importe o provider pelo subpath opcional @olist/design-system/styled-components:

import { ThemeProviderV2 } from '@olist/design-system/styled-components';
import { themes } from '@olist/design-system-tokens';

const App = () => (
  <ThemeProviderV2 theme={themes.olist.base} themeName="olist">
    ...
  </ThemeProviderV2>
);

Essa integração injeta { olist: tokens } no contexto do styled-components e adiciona a tipagem de theme.olist ao DefaultTheme. A dependência styled-components é opcional e só é necessária em projetos com componentes próprios que utilizam esse pacote e acessam theme.olist.*.

O subpath não substitui os imports de CSS apresentados no início desta página.

Utilize o mesmo import no wrapper dos testes para que esses componentes também recebam o tema.

acessando o tema em JavaScript

O hook useTheme retorna o tema no formato { olist: tokens }. Use o objeto apenas quando precisar ler tokens em JavaScript; para estilos, prefira as CSS variables.

import { useTheme } from '@olist/design-system';

const App = () => {
  const theme = useTheme();

  return (
    <button
      style={{
        backgroundColor: theme.olist.color.primary.base,
      }}
    >
      Primary
    </button>
  );
};

export default App;

Você pode encontrar todas as propriedades disponíveis no objeto theme em sua respectiva página dentro da seção "fundamentos".