Documentación del template

Fondos, textos, vidrio, botones y el panel de código derivan de estos cuatro tokens vía color-mix, con paridad claro/oscuro automática. Para rebautizar un sitio derivado, cambia este bloque y nada más; las paletas agro y consumer quedan comentadas en el archivo como ejemplo.

:root {
  --brand-1: #426ab2;
  --brand-2: #40c1c3;
  --brand-deep: #040b2d;
  --brand-link: #3d91cf;
}

Títulos, párrafos, citas, código y los demás elementos de texto ganan el estilo del sistema al entrar en una .es-prose, sin utility por elemento. Las familias cargadas son Manrope, Montserrat y JetBrains Mono.

<div class="es-prose">
  <h2>…</h2>
  <p>…</p>
  <blockquote>…</blockquote>
</div>

<echo-button variant="filled" intent="danger">…</echo-button>

<echo-chip variant="soft" intent="info">…</echo-chip>

<echo-badge variant="filled" intent="success">…</echo-badge>

<echo-pill variant="outline" intent="caution">…</echo-pill>

Cuatro semánticos de estado (info, success, warn, danger) y cuatro tonales nombrados (caution, steel-blue, navy-blue, dark). El texto queda en los grises del tema; el acento entra en el ícono, el título y la cuña.

<echo-alert tone="success" title="…">
  …
</echo-alert>

Superficie opaca del tema, cuña de intención como en los alerts, fondo ilegible por el blur mientras está abierto y scroll trabado. El clic afuera no cierra; cierran el Esc, el cerrar del encabezado y las acciones del pie. El ancho sigue la escala sm, md, lg, xl y xxl.

<echo-modal ref="modal" title-id="…"
            intent="warning" size="lg">
  <template #title>…</template>
  …
  <template #footer>…</template>
</echo-modal>

modal.value?.open()

Los cinco siguen el mismo contrato: open() y close() expuestos por ref, un submit con los datos, y nada de red por dentro. Quien sabe la URL, el token y qué hacer con la respuesta es la aplicación — el componente solo recoge, valida lo que no depende del servidor y devuelve.

<auth-login-modal
  ref="login"
  :pending="sending"
  :error="failure"
  logo="/img/minha-marca.svg"
  title="Entrar no painel"
  @submit="signIn"
  @forgot="forgot?.open()"
  @register="register?.open()"
/>

login.value?.open()

es-input sirve para input y textarea; es-select es el select nativo con la misma tinta. El es-collapse viste el details del navegador: abre, cierra y es accesible sin una línea de JS.

<echo-input v-model="email" type="email" />

<echo-textarea v-model="message" rows="3" />

<echo-select v-model="topic">…</echo-select>

<echo-collapse>
  <template #summary>…</template>
  …
</echo-collapse>