@softize/opus 18.0.1 → 18.1.0

package/src/ui/docs/content/tokens.md

@@ -53,7 +53,7 @@ família oferece sólido, foreground, superfície sutil, ênfase e borda. Use as
 ```tsx preview
 const CONTEXTS = ['neutral', 'primary', 'info', 'success', 'warning', 'danger']
 render(
-  <div className="grid w-full gap-2 sm:grid-cols-2 lg:grid-cols-3">
+  <div className="grid w-full grid-cols-3 gap-2">
     {CONTEXTS.map((context) => (
       <div
         key={context}
@@ -79,7 +79,7 @@ render(
 ```tsx preview
 const LINES = [
   ['border', 'Bordas de contêineres (cards, tabelas, separadores).'],
-  ['input', 'Borda de campos de formulário.'],
+  ['input', 'Borda e fundo sutil de campos de formulário.'],
   ['ring', 'O anel de foco (focus-visible).'],
 ]
 render(
@@ -135,6 +135,49 @@ render(
 > aplicação continuam responsáveis pela densidade. Uma aplicação pode ajustar `font-size` em
 > `html`; texto, espaçamento, radius, foco e elevação acompanham a mesma decisão.
 
+## Tipografia produtiva
+
+Interfaces operacionais precisam acomodar controles, dados e ações sem transformar o corpo comum
+em texto secundário. Use `text-sm` (`0.875rem`) como corpo produtivo: descrições curtas, valores,
+rótulos e texto de componentes. Reserve `text-base` (`1rem`) para leitura mais confortável, como
+prosa longa, conteúdo editorial ou uma ênfase que dependa de tamanho.
+
+O tema não reduz o texto do `body`. Componentes e regiões produtivas declaram `text-sm`
+explicitamente em uma raiz controlada, enquanto o texto geral do documento permanece em `1rem`.
+Assim, escolher o corpo da interface não recalibra tipografia, espaçamento ou dimensões globais.
+
+`base` nomeia o degrau de `1rem` da escala técnica; não significa que todo produto precisa usá-lo
+como corpo predominante. Preserve a fonte raiz usual do documento para que `1rem` continue sendo a
+referência do navegador e para que espaçamentos e controles em `rem` não mudem quando a intenção for
+somente escolher um papel tipográfico.
+
+A herança continua fazendo parte da composição. Declare `text-sm` na raiz de um componente ou de
+uma região produtiva e omita a classe apenas nos filhos que herdam dessa raiz controlada. Um
+elemento também declara `text-sm` quando precisa restaurar o corpo produtivo dentro de um contexto
+com outro tamanho. Não crie um alias como `text-body`: ele esconderia o mesmo degrau sem eliminar
+a necessidade de declarar o papel tipográfico.
+
+```tsx preview
+render(
+  <div className="space-y-3 text-sm">
+    <p>Corpo produtivo para a interface.</p>
+    <p className="text-base leading-relaxed">
+      Corpo ampliado para um trecho que pede leitura mais confortável.
+    </p>
+    <div className="text-xs text-muted-foreground">
+      Metadado compacto.
+      <p className="mt-1 text-sm text-foreground">
+        Corpo produtivo restaurado dentro do contexto compacto.
+      </p>
+    </div>
+  </div>,
+)
+```
+
+Alterar `font-size` em `html` permanece válido quando a aplicação quer recalibrar **toda** a
+interface. Essa decisão escala tipografia, espaços, controles, radius e elevação em conjunto; não é
+o mecanismo para fazer `text-sm` se chamar `text-base`.
+
 ## Radius
 
 > A escala mapeada no `@theme inline` preserva o sentido pré-v4 dos utilitários `rounded-*`

package/src/ui/react.tsx

@@ -388,6 +388,7 @@ export {
 export type {
   ActionFilterBarProps,
   ActionFilterState,
+  AdvancedFiltersLayout,
   ActionListProps,
   ActionListColumn,
   ActionListState,

package/src/ui/theme.css

@@ -333,6 +333,9 @@
  * do Sonner, independentemente da ordem em que a biblioteca injeta seus estilos. */
 .opus-toast {
   gap: 0.75rem;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
 .opus-toast .opus-toast-icon {