nexaas-ui-components 1.0.80 → 1.0.82

package/dist/index.cjs

@@ -115,13 +115,16 @@ var NEUTRAL_BORDERED_VARIANTS = /* @__PURE__ */ new Set([
   "successOutline"
 ]);
 var variants = {
-  // Default: sólido rose-500 + véu de brilho (mix-blend-plus-lighter, sempre
-  // ligado — não só no hover) igual ao node 2:2602 do Figma, sombra rosa com
-  // blur 4px (era 2px, não batia com "Shadow/Button - Primary" do Figma).
-  // Hover troca pro gradiente rose-start/rose-end; active vira rose-600 sólido
-  // sem sombra — nenhum dos dois mudou, só o default e o blur da sombra.
+  // Default: sólido rose-500 + véu de brilho via ::before com mix-blend-mode
+  // (não background-blend-mode: testado no Chromium real — background-blend-mode:
+  // plus-lighter é ignorado silenciosamente e cai pra "normal", sem véu nenhum;
+  // mix-blend-mode: plus-lighter funciona. O "Copy as CSS" do Figma Dev Mode usa
+  // background-blend-mode, mas não reflete suporte real de browser — visualmente
+  // confirmado lado a lado). Sombra com blur 4px (era 2px, Figma pede radius 4).
+  // Hover troca pro gradiente rose-start/rose-end (opaco, cobre o véu). Active
+  // zera o véu (before:opacity-0) e vira rose-600 sólido, sem sombra.
   primary: {
-    text: "relative bg-rose-500 text-white shadow-[0_1px_4px_0_rgba(217,48,99,0.3)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(218,48,99,0.2)] before:to-[rgba(218,48,99,0)] hover:bg-gradient-to-b hover:from-rose-start hover:to-rose-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-rose-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+    text: "relative isolate bg-rose-500 text-white shadow-[0_1px_4px_0_rgba(217,48,99,0.3)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(218,48,99,0.2)] before:to-[rgba(218,48,99,0)] hover:bg-gradient-to-b hover:from-rose-start hover:to-rose-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-rose-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
   },
   secondary: {
     text: "bg-surface border-[0.5px] border-neutral-300 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-600 active:text-neutral-600 active:bg-neutral-200 active:shadow-none disabled:opacity-50"
@@ -145,11 +148,15 @@ var variants = {
   dangerOutline: {
     text: "text-dangerous-500 bg-surface border-[0.5px] border-dangerous-500 hover:bg-dangerous-100 active:bg-dangerous-500 active:text-white active:border-transparent active:shadow-none disabled:bg-surface disabled:border-dangerous-300 disabled:text-dangerous-300 disabled:shadow-none"
   },
+  // Mesmo padrão do primary (node 412:5131): sólido + véu branco (rgba(255,255,255,.15)->0)
+  // via ::before + mix-blend-mode (background-blend-mode não funciona, ver primary acima).
+  // Blur da sombra era 1.5px — Figma "Shadow/Danger" pede radius 3.
   danger: {
-    text: "shadow-[0_1px_1.5px_0_rgba(222,56,56,0.12)] text-white bg-dangerous-500 hover:bg-gradient-to-b hover:from-danger-start hover:to-danger-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-dangerous-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+    text: "relative isolate bg-dangerous-500 text-white shadow-[0_1px_3px_0_rgba(222,56,56,0.12)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-danger-start hover:to-danger-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-dangerous-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
   },
+  // Node 412:5002 — mesmo padrão, véu branco. Blur era 1.5px, Figma "Shadow/Success" pede 3.
   success: {
-    text: "shadow-[0_1px_1.5px_0_rgba(13,189,105,0.2)] text-white bg-success-500 hover:bg-gradient-to-b hover:from-success-start hover:to-success-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] active:bg-success-600 active:shadow-none disabled:opacity-50 disabled:shadow-none"
+    text: "relative isolate bg-success-500 text-white shadow-[0_1px_3px_0_rgba(13,189,105,0.2)] before:content-[''] before:absolute before:inset-0 before:-z-10 before:rounded-lg before:pointer-events-none before:mix-blend-plus-lighter before:bg-gradient-to-b before:from-[rgba(255,255,255,0.15)] before:to-[rgba(255,255,255,0)] hover:bg-gradient-to-b hover:from-success-start hover:to-success-end hover:shadow-[0_2px_3px_0_rgba(56,61,77,0.12)] hover:before:opacity-0 active:bg-success-600 active:shadow-none active:before:opacity-0 disabled:opacity-50 disabled:shadow-none"
   },
   // Antes usava green-500/green-100 — tokens que não existem no design
   // system (caem no verde default do Tailwind). Trocado pros tokens success-*.