@ciromaciel/components-kit 1.8.7 → 1.8.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -50,6 +50,31 @@ function App() {
50
50
 
51
51
  Components are config-driven: pass data objects rather than nested JSX.
52
52
 
53
+ ## Fundos: dois tons de palco, um de superfície
54
+
55
+ Uma página usa exatamente dois tons de fundo para os seus palcos, no claro e no escuro:
56
+
57
+ | Token | Mantine | Claro | Escuro |
58
+ |---|---|---|---|
59
+ | `SECTION_BACKGROUNDS.white` | `gray.0` | `#FFFFFF` | `#0B0F12` (o fundo da página) |
60
+ | `SECTION_BACKGROUNDS.gray` | `gray.1` | `#F9FAFB` | `#12181D` |
61
+
62
+ **Palco** é toda faixa ou seção de largura inteira, o fundo da página, a barra
63
+ do cabeçalho (inclusive o cartão fixo que fica sobre a página), o painel de
64
+ menus e o menu de navegação do celular, o rodapé, as páginas legais e a 404. Os
65
+ componentes recebem `background="white" | "gray"` e resolvem com
66
+ `resolveBackground`. As faixas alternam os dois tons.
67
+
68
+ O `white` do Mantine **não** é tom de palco: no escuro ele é `#1A2127`, a
69
+ superfície elevada. Serve só para o que flutua ou fica sobre um palco como
70
+ cartão: cartões, modais, gavetas laterais sobre o conteúdo, menus suspensos,
71
+ popovers, a caixa de um formulário dentro de uma faixa. Para cartões, use
72
+ `resolveCardBackground`.
73
+
74
+ Por quê: em 21/10/2026 o cartão fixo do cabeçalho e a faixa da newsletter usavam
75
+ `bg="white"`, e no escuro a página mostrava três tons (`#0B0F12`, `#12181D`,
76
+ `#1A2127`). Nunca `bg="white"` numa faixa, barra, rodapé ou página.
77
+
53
78
  ## Components
54
79
 
55
80
  **Layout and structure** — `Layout`, `Header`, `Navbar`, `Footer`, `Section`.