@topjoao/top-design-system 0.1.3 → 0.1.4

package/README.md

@@ -45,13 +45,24 @@ oficial da TopSolutions. Configure-o uma vez na aplicação consumidora:
 import PrimeVue from 'primevue/config'
 import { TopSolutionsPreset } from '@topjoao/top-design-system'
 
-app.use(PrimeVue, {
-  theme: {
-    preset: TopSolutionsPreset,
-    options: { darkModeSelector: '.dark' },
-  },
-})
-```
+app.use(PrimeVue, {
+  theme: {
+    preset: TopSolutionsPreset,
+    options: {
+      darkModeSelector: '.dark',
+      cssLayer: {
+        name: 'primevue',
+        order: 'primevue',
+      },
+    },
+  },
+})
+```
+
+A camada `primevue` mantém os estilos estruturais do tema abaixo dos padrões do
+Design System e das classes utilitárias da aplicação. Com isso, propriedades
+como `headerClass` e `contentClass` conseguem sobrescrever os valores padrão sem
+`!important`.
 
 Para ativar o modo escuro, adicione ou remova `.dark` uma única vez no elemento
 `<html>` da aplicação. Os componentes usam tokens semânticos de superfície, texto e
@@ -478,8 +489,8 @@ atua no elemento externo que o envolve. A prop `class` continua disponível para
 customizar somente uma ocorrência. Algumas regras internas que usam
 `!important` podem exigir maior especificidade ou `!important` para serem
 sobrescritas.
-
-## TopConfirmDialog
+
+## TopConfirmDialog
 
 Diálogo de confirmação baseado no `Dialog` do PrimeVue e nos botões do Design
 System. A visibilidade é controlada por `v-model`; a aplicação consumidora