Atualizar 'Dicas de Plone 6 e Volto'

Dicas-de-Plone-6-e-Volto.md

@@ -346,6 +346,76 @@ Exemplos:
 - [Redturtle Editable Footer](https://github.com/RedTurtle/volto-editablefooter)
 
 
+#### CSS customizado
+
+O volto tem dois arquivos que são pontos para inclusão de CSS customizado, localizados dentro do seu pacote, em `src/theme`:
+
+
+|Arquivo|Nota|
+|---|---|
+|`_main.scss`|CSS geral e importação de outros arquivos|
+|`_variables.scss`|definição de variáveis CSS|
+
+
+##### Importação de arquivos
+
+Use:
+`@import '_arquivo'`
+
+Este comando procura por `_arquivo.scss` (SASS) ou `_arquivo.css`. O underscore na frente é uma convenção, para dizer que o arquivo é só para import.
+
+##### Variáveis de Volto Light Theme
+
+Além dos [`behaviors` de tema explicados mais abaixo](#), pode-se configurar as cores do `volto-light-theme` definindo algumas variáveis de CSS. Listo algumas abaixo:
+
+|Variável|Nota|
+|---|---|
+|`--header-background`, `--header-foreground`|Cores do cabeçalho|
+|`--footer-background´, `--footer-foreground`|Cores do rodapé|
+|`--accent-color`, `--accent-foreground-color`|Cor de destaque, usado para definir variáveis para o menu de hamburguer, breadcrumbs e search|
+
+E várias outras. Use o developer tools para descobrir mais. Não tem documentação.
+
+
+#### Cores dos blocos (isto é do corpo da página)
+
+Por default, é definido hard-coded e para serem alteradas, deve-se usar a configuração em `index.ts`:
+
+```
+  config.blocks.themes = [
+    {
+      style: {
+        '--theme-color': 'var(--body-background-color)', // Block Wrapper
+        '--theme-high-contrast-color': '#ecebeb', // Cards in Grid block
+        '--theme-foreground-color': 'var(--body-foreground-color)',
+        '--theme-low-contrast-foreground-color': '#555555',
+      },
+      name: 'default',
+      label: 'Default',
+    },
+    {
+      style: {
+        '--theme-color': '#ecebeb',
+        '--theme-high-contrast-color': '#fff',
+        '--theme-foreground-color': '#000',
+        '--theme-low-contrast-foreground-color': '#555555',
+      },
+      name: 'grey',
+      label: 'Grey',
+    },
+  ];
+```
+
+Se forem usadas variáveis de CSS nesta parte, as variáveis podem ser definidas nos [arquivos CSS descritos acima](#css-customizado), mantendo o código mais organizado.
+
+#### Retirando partes da tela no volto-light-theme
+
+O volto-light-theme facilita a customização do site, retirando partes da tela, como o "colophon" (onde tem a licença, etc). Para isto, use:
+
+`config.unRegisterSlotComponent('postFooter', 'Colophon', 0);`
+
+Para ver o que pode ser retirado, olhe o arquivo [slots.ts](https://github.com/kitconcept/volto-light-theme/blob/main/frontend/packages/volto-light-theme/src/config/slots.ts) no código-fonte.
+
 ## Insights
 
 ### Itens de Painel de Controle