@aurea-uds/native 0.8.6 → 0.8.8

package/dist/theme.js

@@ -109,33 +109,64 @@ export function useAureaTokens() {
 export function useAureaStrings() {
     return usar("useAureaStrings").strings;
 }
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-// Sobre a marca — a cor de texto FORÇADA dentro de uma superfície amarela
-// ─────────────────────────────────────────────────────────────────────────────────────────────
-//
-// 🔴 **Isto existe porque o contraste não deixou escolha**, e os números estão no `layout.tsx`:
-// sobre o `primary`, o texto comum mede **1,83 no tema escuro** e o esmaecido **1,35**. Os dois
-// são ilegíveis. O único par que serve nos DOIS temas é `primary-foreground`, com 4,54.
-//
-// ⚠ **E no React Native não há cascata de cor** — `color` num `View` não desce para o `Text` de
-// dentro, como desceria no CSS. Então a cor tem de viajar por CONTEXTO, que é exatamente a
-// decisão que o `Field` do Lote 4 tomou para empurrar nome, dica e estado de inválido.
-//
-// ⚠ **Ele mora AQUI e não no `layout.tsx` por uma razão de estrutura:** o `layout.tsx` importa o
-// `Text`, então se ele também exportasse o contexto o `text.tsx` teria de importar de volta — um
-// ciclo. Este módulo é o que os dois já importam.
-//
-// ⚠ **Não sai pela porta da frente do pacote.** É acordo interno entre o `Card` e o `Text`.
 const SobreAMarcaCtx = React.createContext(null);
 /** O provedor. Quem usa é o `Card variant="brand"`. */
 export const SobreAMarca = SobreAMarcaCtx;
 /**
- * A cor que o texto tem de usar quando está sobre a marca, ou `null` quando não está.
+ * O par de cores obrigatório quando se está sobre a marca, ou `null` quando não se está.
  *
- * ⚠ **Ela vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
+ * ⚠ **Ele vence TODOS os tons, inclusive os explícitos.** Um `tone="danger"` sobre o amarelo
  * mediria menos que os 4,5 da norma, então respeitá-lo entregaria texto ilegível em nome da
- * obediência. **Sobre o amarelo existe UMA cor de texto** — a hierarquia sai de peso e tamanho.
+ * obediência. **Sobre o amarelo existe UMA tinta** — a hierarquia sai de peso e tamanho.
+ *
+ * ⚠ **E o alcance dele é DECLARADO, não completo.** Leem o contexto: `Text`, a família de campo,
+ * o `Button` e o `IconButton`. **Componente fora dessa lista continua quebrado dentro do cartão
+ * amarelo**, e gate estático nenhum vê isso — o que o consumidor encaixa não está no nosso
+ * código, exatamente o ponto cego que o `check 43` já declara.
  */
 export function useSobreAMarca() {
     return React.useContext(SobreAMarcaCtx);
 }
+/**
+ * Corta a marca para dentro.
+ *
+ * 🔴 **Existe por uma armadilha do React Native que é invisível na tela e óbvia no código:** o
+ * `Modal` desenha numa camada POR CIMA de tudo, mas em React ele continua sendo FILHO de quem o
+ * escreveu. Um `Select` dentro de um `Card variant="brand"` abre a folha dele **fora** do cartão
+ * amarelo — e a folha herdaria a tinta do amarelo mesmo assim, pintando texto marrom sobre fundo
+ * normal.
+ *
+ * ⚠ **Camada visual e árvore de contexto são coisas diferentes**, e é só o segundo que manda na
+ * cor. Toda superfície que sai do fluxo — as duas folhas de escolha e os quatro sobrepostos —
+ * passa por aqui.
+ */
+export function ForaDaMarca({ children }) {
+    return _jsx(SobreAMarcaCtx.Provider, { value: null, children: children });
+}
+/**
+ * A pele que um CAMPO tem de vestir quando está dentro de um `Card variant="brand"`, ou `null`
+ * quando não está.
+ *
+ * O campo perde o fundo e passa a ser um contorno da tinta: **4,54 contra o amarelo nos dois
+ * temas**, contra os 2,43/2,24 do `borderStrong` e os 1,61 do `fieldBg` no tema claro. A norma
+ * 1.4.11 pede 3:1 para o contorno que identifica um campo, e só a tinta chega lá.
+ *
+ * ⚠ **O fundo some porque NÃO HÁ fundo possível** — medidas as três superfícies neutras do
+ * sistema contra o amarelo no tema claro: `card` 1,91 · `background` 1,73 · `secondary` 1,61.
+ * Nenhuma separa. Um contorno forte separa.
+ *
+ * 🔴 **E a tinta vence o estado de INVÁLIDO, que é o contrário do que a intuição manda.** Medido:
+ * a borda de inválido (`danger-400`, `#9f2330`) mede **1,86** contra o amarelo — ela é MENOS
+ * visível que a tinta. Pintar de vermelho ali deixaria o campo errado mais difícil de achar que o
+ * campo certo. Dentro deste cartão o erro é dito pela MENSAGEM do `Field` e pelo estado que o
+ * leitor de tela anuncia, não pela cor — que é o que a norma 1.4.1 já exige de qualquer forma.
+ *
+ * ⚠ **O texto digitado e o marcador de dica ficam da MESMA cor**, porque só existe uma tinta. É
+ * perda real de hierarquia, declarada e não escondida: sobre o amarelo não há segunda cor.
+ */
+export function usePeleSobreAMarca() {
+    const marca = useSobreAMarca();
+    return marca == null
+        ? null
+        : { borderColor: marca.tinta, backgroundColor: "transparent", color: marca.tinta };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/native",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "React Native target for Aurea UDS: the theme x density provider, the first components and the Carbon icons, drawn on react-native-svg.",
   "keywords": [
     "aurea",
@@ -47,7 +47,7 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@aurea-uds/tokens": "^0.8.6"
+    "@aurea-uds/tokens": "^0.8.8"
   },
   "peerDependencies": {
     "@react-native-community/datetimepicker": ">=8",