rootzz-layout 0.1.6 → 0.1.8

package/dist/styles.css

@@ -61,29 +61,14 @@
   --rzl-z-drawer: 50;
   --rzl-z-dropdown: 60;
 
-  /* Glow da marca — gradiente decorativo no canto superior esquerdo, atrás de
-     todo o conteúdo. `--rzl-brand-glow-opacity` controla a intensidade (bem
-     clara por padrão); zere para desligar. As cores vêm da nova brand Eduzz
-     (laranja → âmbar → transparente). */
-  --rzl-brand-glow-opacity: 0.5;
-  --rzl-brand-glow: radial-gradient(
-    115% 115% at 12% 4%,
-    rgba(255, 106, 0, 0.55) 0%,
-    rgba(255, 145, 10, 0.45) 18%,
-    rgba(255, 178, 40, 0.32) 34%,
-    rgba(255, 205, 110, 0.18) 52%,
-    rgba(255, 224, 170, 0.08) 68%,
-    transparent 82%
-  );
-  --rzl-brand-glow-size: min(70vw, 900px);
-
   /* Movimento */
   --rzl-duration: 200ms;
   /* Troca de tema: o fundo lidera (mais lento) e o texto/borda trocam rápido,
-     mas só depois que o fundo já escureceu/clareou (delay) — evita o "flash"
-     de texto claro sobre fundo ainda claro. Tudo termina junto. */
-  --rzl-theme-fg-duration: 150ms;
-  --rzl-theme-fg-delay: 150ms;
+     mas só depois que o fundo já começou a escurecer/clarear (delay) — evita o
+     "flash" de texto claro sobre fundo ainda claro. Texto rápido, com delay
+     curto: começa cedo e termina antes do fundo. */
+  --rzl-theme-fg-duration: 90ms;
+  --rzl-theme-fg-delay: 70ms;
   --rzl-theme-bg-duration: 300ms;
   --rzl-ease: cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -153,8 +138,6 @@
 
 .rootzz-layout {
   /* Layout do shell: coluna com topbar no topo e (sidebar + conteúdo) abaixo. */
-  position: relative; /* contexto de empilhamento p/ o glow da marca (::before) */
-  z-index: 0;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -167,25 +150,6 @@
   -webkit-font-smoothing: subpixel-antialiased;
 }
 
-/* Glow da marca: camada decorativa no canto superior esquerdo, ATRÁS de todo o
-   conteúdo (z-index -1, dentro do contexto de empilhamento da .rootzz-layout —
-   acima do fundo do shell, abaixo de topbar/sidebar/conteúdo). A topbar é opaca
-   e mascara o ponto mais quente do gradiente; sidebar e conteúdo são
-   transparentes, então o glow aparece por trás deles. `pointer-events: none`
-   garante que ele nunca capture cliques. */
-.rootzz-layout::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  width: var(--rzl-brand-glow-size);
-  height: var(--rzl-brand-glow-size);
-  background: var(--rzl-brand-glow);
-  opacity: var(--rzl-brand-glow-opacity);
-  pointer-events: none;
-}
-
 /* Resets escopados aos elementos da própria lib (classes `rootzz-*`).
    Nunca usam seletores de tag globais (`a`, `button`, `img`…), para não
    vazar no conteúdo do consumidor dentro de `.rootzz-content__inner`. */
@@ -250,9 +214,7 @@ select[class*='rootzz-'] {
   gap: 0.5rem;
   height: var(--rzl-topbar-height);
   padding: 0 0.75rem;
-  /* Transparente para o glow da marca aparecer por trás da topbar; o fundo
-     opaco do shell vem de `.rootzz-layout` (var(--rzl-bg)). */
-  background: transparent;
+  background: var(--rzl-surface);
   border-bottom: 1px solid var(--rzl-border);
 }
 
@@ -569,8 +531,8 @@ select[class*='rootzz-'] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  /* 8px de gap entre os ícones + 4px aqui = 12px do usuário até os ícones. */
-  margin-left: 4px;
+  /* 8px de gap entre os ícones + 8px aqui = 16px do usuário até os ícones. */
+  margin-left: 8px;
   max-width: 220px;
   padding: 0.25rem 0.5rem 0.25rem 0.25rem;
   border-radius: 9999px;
@@ -729,9 +691,7 @@ select[class*='rootzz-'] {
   flex: 1 1 0%;
   min-height: 0;
   overflow-y: auto;
-  /* Fundo transparente para o glow da marca aparecer por trás; o fundo opaco
-     vem de `.rootzz-layout` (var(--rzl-bg)). */
-  background: transparent;
+  background: var(--rzl-bg);
   color: var(--rzl-fg);
 }
 
@@ -850,9 +810,7 @@ select[class*='rootzz-'] {
   height: 100%;
   min-height: 0;
   width: 100%;
-  /* Transparente para o glow da marca aparecer por trás da sidebar estática.
-     No drawer mobile, o fundo opaco vem do próprio `.rootzz-drawer`. */
-  background: transparent;
+  background: var(--rzl-surface);
 }
 
 .rootzz-nav__header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rootzz-layout",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Shell de aplicação (Topbar + Sidebar + Content) da Eduzz para React. Leve, sem dependências de runtime e em CSS puro (sem Tailwind no consumidor).",
   "license": "MIT",
   "author": "Eduzz",