theme provider

Use o theme provider para compartilhar configurações globais de temas em todos os componentes.

uso

Primeiramente, importe o componente ThemeProvider e envolva toda sua aplicação:

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

const App = () => {
  return <ThemeProvider>...</ThemeProvider>;
};

A partir de agora você pode utilizar qualquer um de nossos componentes ou propriedade do tema na sua aplicação.

objeto theme

Utilizando o ThemeProvider é possível acessar a propriedade theme que é injetada em qualquer styled component e também é possível utilizar com o hoc "withTheme" do styled-components ou através do hook "useTheme" do styled-components Dessa forma, você consegue utilizar fora de um styled-component.

prefixo

Uma coisa importante para se notar é a presença da palavra-chave "olist" antes das propriedades do objeto theme. Para evitar conflitos com outros temas ou ThemeProviders que você possa estar utilizando na sua aplicação, nós prefixamos nosso tema com a palavra olist. Então, confira se está acessando essa palavra-chave antes de acessar qualquer propriedade do tema.

Utilizando em um styled-component:

const MyComponent = styled.button`
  background-color: ${(props) => props.theme.olist.color.primary.base};
`;

Utilizando o tema com o hoc withTheme:

import React from 'react';
import { withTheme } from 'styled-components';

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

export default withTheme(App);

Utilizando o tema com o hook useTheme:

import React, { useContext } from 'react';
import { useTheme } from 'styled-components';

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

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

export default App;

propriedades

Você pode encontrar todas as propriedades disponíveis no objeto theme em sua respectiva página dentro da seção "fundamentos". Na página de "cor" você irá encontrar todos o detalhes, como usar e as definições de tokens e tema, por exemplo.