marcelosdm/multitheme-nextjs

Multitemas

Precisamos adicionar ao template um tema próprio, como foi feito no arquivo src/components/templates/header.tsx

<ThemeProvider
      theme={(theme) =>headerTheme(theme, mode)}
    >

Também precisamos criar um arquivo de tema especifico para lidar com os novos temas src/components/templates/theme.tsx
A estrutra desses temas de templates, foram pensados para dar suporte ao tema global que é tokenizado de acordo com o system design, recebendo o tema global e repassando para o tema do template;

Criando os temas

Os temas customizados devem seguir uma estrutura diferente de composição, para que os atomos, moleculas e organismos possam consumir os temas sem precisarem saber qual estilo está sendo aplicado.

const coffe = (theme: any) =>
  createTheme({
    ...theme,
    button: {
      primay: {
        color: "#007789",
        borderColor: "#225511",
      },
      color: "#eee",
      borderColor: "#228855",
    },
    headerContainer: {
      backgroundColor: theme.darkSecundaryColor,
    },
  } as any);

Ajustando os styled components

src/components/atoms/button/button.style.tsx O styled component deve ser ajustado para lidar com o sistema de multitemas, para isso devemos deixar no seguinte formato:

 `
  background-color: ${
    props.theme.button?.backgroundColor || props.theme.neutralPrimaryColor
  };
    borderColor: ${
      props.theme.button?.borderColor || props.theme.darkPrimaryColor
    };
`

Dessa forma os estilos passam a receber dois temas, e damos prioridade para validar o tema customizado antes de acessar o tema global, outro ponto importante é a construção dos nomes, que devem representar o componente e não a tokenização, por exemplo:

Um componente de tipografia chamado TEXTO deve ter em seu estilo com a seguinte convenção:

 `
  background-color: ${
    props.theme.texto?.backgroundColor || props.theme.neutralPrimaryColor
  };
`

Convenção: props.theme{nomeDoComponente}{propriedadeDoCSS} --- usar --- lowerCamelCase

Lidando com variantes

Mesmo com o multitemas instalado e pronto, ainda devemos lidar com as variantes de cada component, para isso utilizei uma prop nova chamada "variante" como no exemplo dos botões chamados no header src/components/templates/header.tsx
Mas para as variantes funcionarem com o novo sistema de multitemas, foi desenvolvido uma util que deve ser usada como suporte.

const Button = styled(Buttom)((props: any) => {
  setStyleVariants("button", props); // devemos chamar a util indicando qual componente estamos validando a variação
  return `
  background-color: ${
    props.theme.button?.backgroundColor || props.theme.neutralPrimaryColor
  };
    borderColor: ${
      props.theme.button?.borderColor || props.theme.darkPrimaryColor
    };
`;
})

A util esta no arquivo src/styles/utils/setStyleVariants.ts e basicamente ela valida a variação do componente pela props "variante" e repassa ao tema.

const setStyleVariants = (component: string, props: any) => {
if (props.theme?.[component]?.[props.variante]) {
  props.theme[component] = props.theme[component][props.variante];
}
};

O uso de variante ainda está em desenvolvimento, precisamos validar os cenarios a seguir, para estar pronto:

• Quando meu componente tem atributos do css gerais indiferentes da variante
• Quando uso variantes para componentes usando temas globais.