Projetos FS utilizam uma abordagem de estilização do storefront baseada em temas, isto é, folhas de estilo CSS que gerenciam Design Tokens (DT) para customizar elementos de design a nível de sistema.
Isso permite:
- Definir uma identidade visual consistente ao longo de toda a UI
- Centralizar configurações de cores, tipografia, espaçamentos, bordas e várias outras propriedades visuais
- Estender ou substituir os visuais de componentes globalmente
Taxonomia dos Design Tokens
Todos os tokens providos pela FS seguem um esquema de nomenclatura segmentado, visando previsibilidade e coesão.
De forma simplificada, deve compreender (mais ou menos) as partes:
Para mais detalhes, acesse aqui
Tema customizado
O tema padrão do projeto, o Brandless, provê todos os DT’s globais na forma de variáveis CSS (ou custom properties) com valores pré-definidos.
É possível seguir com algum dos temas disponíveis para uso ou criar um novo em src/themes/ — o que será abordado a seguir.
Um tema custom-theme deve ter um arquivo de estilo correspondente (mesmo nome) no formato:
Embora seja esse o nome tipicamente utilizado, você pode renomeá-lo se for mais coerente
// ----------------------------------------------------------
// GLOBAL TOKENS
// Custom Theme
// ----------------------------------------------------------
@layer theme {
.theme {
// --------------------------------------------------------
// Colors (Branding Core)
// --------------------------------------------------------
// --------------------------------------------------------
// Typography (Branding Core)
// --------------------------------------------------------
// --------------------------------------------------------
// Spacing (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Grid & Layout (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Interactive Controls (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Refinements
// --------------------------------------------------------
// --------------------------------------------------------
// FS UI Components
// --------------------------------------------------------
.section {
// Add here the customizations for FastStore UI components
}
}
}As variáveis CSS devem ser definidas na classe .theme, que é atribuída ao <body> da aplicação.
Todas as variáveis globais são predefinidas no pacote @faststore/ui e você deve trazê-las e sobrescrevê-las no custom-theme (principalmente as que definem cores e fontes) para refletir a identidade visual
@layer base, components, theme;Utilitários
Breakpoints
Descrever o include-media https://developers.vtex.com/docs/guides/faststore/using-themes-mixins-breakpoints
https://github.com/vtex/faststore/blob/dev/packages/ui/src/styles/base/tokens.scss
https://developers.vtex.com/docs/guides/faststore/themes-overview#creating-a-custom-theme