docs: variantes de contenção do Card (default/flat) e títulos em contexto - #130
Conversation
…exto Espelha regra consolidada no Crisis Monitor (Issue Crisis-Monitor/Crisis-Monitor#372): flat = card de seção (borda sutil, sem sombra) para agrupamento na página; default (sombra) reservado a conteúdo elevado. Títulos por contexto usam as utilities text-display/title/heading da escala tipográfica. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 116b2ba970
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| | `flat` | borda sutil, sem sombra | Card de seção — agrupamento de conteúdo dentro da página (dashboards, abas, listagens) | | ||
| | `default` | borda + sombra suave | Conteúdo elevado — dialogs, popovers e destaques que flutuam sobre a página | | ||
|
|
||
| Nunca reimplemente contenção de seção com classes ad-hoc por tela: se a página precisa agrupar conteúdo, é `flat`; se o conteúdo flutua, é `default`. |
There was a problem hiding this comment.
This rule makes flat the required representation for in-page section cards and forbids ad-hoc section containment, but the shipped Card registry (registry/pulso/ui/card.tsx and generated public/r/card.json) still has only className and always includes shadow-[var(--shadow-lg)]; the copyable example above also has no variant. Consumers following the new guidance have no supported way to render the mandated flat card other than overriding classes, so the docs and API become contradictory.
Useful? React with 👍 / 👎.
|
|
||
| ## Títulos dentro do card | ||
|
|
||
| Header de card usa a utility `text-heading` da escala tipográfica (18px, peso 600). Cabeçalho de seção da página usa `text-title`; título de página usa `text-display`. Não recomponha títulos com `text-sm font-semibold` e afins — as utilities já carregam tamanho, peso e line-height. |
There was a problem hiding this comment.
These Tailwind utilities are not exported by this package today: repo-wide search finds no --text-heading or --text-title, and the @theme inline blocks in src/app/globals.css and tokens/pulso-tokens.tailwind.css only expose fonts, colors, and radii while typography is published as custom properties such as --text-display, --text-h1, and --text-h2. Users following this new Card guidance will write classes like text-heading that generate no styles, exactly where the docs tell them not to fall back to explicit text-* font-* classes.
Useful? React with 👍 / 👎.
2 participants
Espelha no repositório oficial a regra consolidada no Crisis Monitor — Issue Crisis-Monitor/Crisis-Monitor#372 (Fatia 1 do guarda-chuva de conformidade visual #371, PR Crisis-Monitor/Crisis-Monitor#378).
O que mudou
default/flatcom a regra de contenção (flat = card de seção, borda sutil sem sombra, para agrupamento dentro da página; default = conteúdo elevado como dialogs/popovers) + regra de títulos em contexto (text-display/text-title/text-heading)O Crisis Monitor é o palco onde o Pulso é aplicado e evoluído — esta regra nasceu da auditoria de conformidade das telas Analytics/Comparativo/Detalhe, que tinham 4 tratamentos de contenção distintos para conteúdo equivalente.
🤖 Generated with Claude Code