Saltar al contenido
ssntl/ui
EN

Elevation

Cinco capas a partir de los tokens de sombra del sistema, de la superficie base a los modales, más el movimiento pop-in y pop-out para capas flotantes.

  1. elevation-0Base surfaceCards and sections
  2. elevation-1Resting controlA selected tab, a badge
  3. elevation-2Dropdown layerMenus, popovers, toolbars
  4. elevation-3Raised cardFeatured or dragged cards
  5. elevation-4OverlayToasts and modals

Instalación

$ pnpm dlx shadcn@latest add @ssntl/elevation

Uso

css
/* app/globals.css */
@import "../styles/ssntl/shadow-smooth.css";
@import "../styles/ssntl/elevation.css";

<section class="bg-muted elevation-0">…</section>
<div role="menu" class="elevation-2 data-[state=open]:pop-in">…</div>
<div role="dialog" class="elevation-4">…</div>

Reglas

Lo que este componente espera de ti, tal como se instala en styles/ssntl/elevation.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

styles/ssntl/elevation.md
## Reglas de Elevation

- **Superficie base.** El contenido estático queda en `elevation-0` y se separa por tono, nunca por sombra.
- **Capa de menús.** Menús, popovers y barras de herramientas usan `elevation-2` (`shadow-float`).
- **Tarjeta elevada.** Una tarjeta destacada o arrastrada usa `elevation-3` (float más lift), por encima de los menús.
- **Notificación flotante y profundidad modal.** Toasts y diálogos usan `elevation-4`, la capa superior; un modal agrega un velo.
- `pop-in` hace crecer la capa desde su origen en `--duration-menu` (define `--pop-duration` para modales); `pop-out` sale más rápido. Con movimiento reducido queda solo el fundido.
Abrir el archivo de reglas completo (se abre en otra pestaña)

Código

styles/ssntl/elevation.css
/* Elevation: how far a layer sits above the page, from the system's own
   shadow tokens. Static content stays on the base surface; only what floats
   gets a shadow, and the higher it floats, the more it casts.

     elevation-0      base surface: cards, sections (tone separates them)
     elevation-1      controls resting on a surface (bezel)
     elevation-2      dropdowns, popovers, menus, toolbars (float)
     elevation-3      raised or dragged cards (float + lift)
     elevation-4      toasts and modals, above everything (smooth stack × 3)

     pop-in, pop-out  enter and exit for floating layers; set --pop-duration
                      to var(--duration-panel) for modals */

@utility elevation-0 {
  box-shadow: none;
}

@utility elevation-1 {
  box-shadow: var(--shadow-bezel);
}

@utility elevation-2 {
  box-shadow: var(--shadow-float);
}

@utility elevation-3 {
  box-shadow: var(--shadow-float), var(--shadow-lift);
}

@utility elevation-4 {
  @apply shadow-smooth shadow-intensity-200 shadow-size-3;
}

/* Floating layers grow in from their origin and fade out faster than they
   came in. With reduced motion only the opacity changes. */
@utility pop-in {
  animation: pop-in var(--pop-duration, var(--duration-menu)) var(--ease-out);
  @media (prefers-reduced-motion: reduce) {
    animation-name: fade-in;
  }
}

@utility pop-out {
  animation: pop-out var(--duration-fast) var(--ease-out) forwards;
  @media (prefers-reduced-motion: reduce) {
    animation-name: fade-out;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: var(--es-press);
  }
}

@keyframes pop-out {
  to {
    opacity: 0;
    scale: 0.98;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}