Styleguide

Todas las clases usan design tokens. CambiΓ‘ el tema con el botΓ³n β˜€οΈ/πŸŒ™ para verificar que todo responde.

Colores (Tokens)

Superficies

bg-surface

Fondo principal

bg-surface-dim

Fondo secundario

bg-surface-bright

Fondo elevado

Texto

Aa

text-on-surface

Texto principal

Aa

text-on-surface-muted

Texto secundario

Aa

text-on-surface-faint

Texto terciario

Bordes y marca

border-border

Bordes

bg-accent

Color de marca

bg-accent β†’ bg-accent-hover

Pasa el cursor ↑

TipografΓ­a

Heading β€” text-2xl font-bold text-on-surface

Subheading β€” text-lg font-semibold text-on-surface

Body text β€” text-sm text-on-surface

Muted text β€” text-sm text-on-surface-muted

Caption β€” text-xs text-on-surface-faint

Botones

Primary

bg-accent text-surface-bright hover:bg-accent-hover rounded-lg px-4 py-2 text-sm font-medium

Outline

border border-border bg-surface-bright text-on-surface hover:bg-surface-dim rounded-lg px-4 py-2

Ghost

text-on-surface-muted hover:bg-surface-dim hover:text-on-surface rounded-lg px-4 py-2

Danger

bg-red-600 text-white hover:bg-red-700 rounded-lg px-4 py-2

Badges / Tags

Default Neutral Success Error Warning
rounded-full bg-accent px-3 py-0.5 text-xs font-medium text-surface-bright

Formularios

border border-border bg-surface text-on-surface placeholder:text-on-surface-faint focus:border-accent focus:ring-1 focus:ring-accent rounded-lg px-3 py-2 text-sm

Cards

Card simple

Contenido de la card con texto secundario.

Card con acciΓ³n

Nuevo

Contenido descriptivo de la card.

border border-border bg-surface-bright rounded-xl p-4 sm:p-6

Alertas / Notices

Info: Mensaje informativo con tokens neutros.
Success: OperaciΓ³n exitosa.
Error: Algo saliΓ³ mal.
Warning: PrecauciΓ³n.

Tooltips

Info contextual que aparece junto a un trigger. Dos variantes: hover (CSS puro) y clickeable (cierra al hacer click afuera).

On hover

Campo obligatorio i No se puede dejar vacΓ­o LΓ­mite de caracteres i MΓ‘ximo 255 caracteres
group + group-hover:opacity-100 β€” sin JS, solo CSS

Clickeable (cierra al hacer click afuera)

InformaciΓ³n extendida
data-controller="tooltip" + data-action="tooltip#toggle" + outside click

Modal β€” Controller directo

Control total: escribΓ­s el <dialog> a mano. ElegΓ­s tamaΓ±o, posiciΓ³n y contenido libre (formularios, info panels, filtros, etc).

Cada data-controller="modal" es una instancia independiente.

Modal centrado (md)

Este es el modal por defecto. TamaΓ±o md, posiciΓ³n center.

Modal grande (lg)

Se controla con data-modal-size-value="lg" en el wrapper.

Bottom sheet

Se controla con data-modal-position-value="bottom". Ideal para mobile.

Slide-over

Se controla con data-modal-position-value="right". Ideal para formularios o filtros.

TamaΓ±os disponibles

data-modal-size-value="sm | md | lg | xl | full"

Posiciones disponibles

data-modal-position-value="center | bottom | right"

MΓΊltiples modales

Cada <div data-controller="modal"> es independiente β€” no necesitan IDs

Modal β€” Via partial (confirm)

Es una configuraciΓ³n prearmada del controller directo: tamaΓ±o fijo, dialog genΓ©rico, botones confirmar/cancelar. Solo customizΓ‘s contenido, colores y textos via parΓ‘metros.

Ideal para confirmaciones: eliminar, desactivar, cambiar estado. No necesitΓ‘s escribir HTML del dialog.

Tabla comparando ambos enfoques:

Nombre Controller directo Partial confirm
Lucas

Detalle de Lucas

Email: lucas@example.com

Estado: Activo

Rol: Admin
MarΓ­a

Detalle de MarΓ­a

Email: maria@example.com

Estado: Pendiente

Rol: Editor
Pedro

Detalle de Pedro

Email: pedro@example.com

Estado: Inactivo

Rol: Viewer

Confirmar acciΓ³n

Confirmar

Ejemplo extra: partial con parΓ‘metros custom

Cambiar estado

Desactivar

CΓ³digo ERB del partial

&lt;%= render "shared/confirm_modal",
    title: "Cambiar estado",            # TΓ­tulo del modal
    confirm_text: "Desactivar",        # Texto del botΓ³n confirmar
    confirm_style: "primary",          # primary | danger
    size: "md",                         # sm | md | lg | xl | full
    position: "center" do %%&gt;

  &lt;button data-action="modal#open"
          data-modal-message-param="ΒΏDesactivar el usuario?"  # Mensaje del body
          data-modal-url-param="/users/1/deactivate"&gt;         # URL de la acciΓ³n
    Desactivar usuario
  &lt;/button&gt;
&lt;%% end %%&gt;