Componentes

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 "useContext" do react 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 useContext:

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

const App = () => {
  const theme = useContext(ThemeContext);

  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.