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.