Fundamentos

Superficies de marca

Una superficie de marca es una variante de contenedor: una tarjeta, un modal o un div que envuelve una sección. El contenedor recibe el fondo de la superficie, y los tokens que ella redefine cambian el aspecto de lo que lleva dentro.

Fuera de los contenedores, solo la admiten las piezas que lo indican en su página.

Son tres y están al mismo nivel. Lo que las distingue es su criterio de uso, no su aspecto.

spotlight

La tarjeta que debe mirarse primero, y las secciones que cierran una página.

standout

Destacar una tarjeta dentro de un grupo.

callout

Destacar una tarjeta dentro de un grupo.

El criterio lo pone quien la aplica

Los criterios de uso son flexibles a propósito. Ninguna regla separa standout de callout: se elige la que mejor encaje en cada caso.

Uso

Se aplican con su clase sobre el elemento que la recibe. La clase pinta el fondo y redefine los tokens semánticos que cambian dentro, igual que un tema hace en :root. Ningún componente sabe sobre qué superficie está: lee los tokens que lee siempre.

La tarjeta entera es la superficie.

<div style="display: grid; gap: 1.5rem">
    <vadavo-card class="spotlight" heading="Spotlight">
        <p>La tarjeta entera es la superficie.</p>
    </vadavo-card>
    <div class="standout" style="padding: 24px; border-radius: var(--surface--radius--container)">
        <button class="button primary">Un botón dentro</button>
    </div>
</div>

Qué cambia dentro

Cada muestra lee el token dentro de la superficie correspondiente.

spotlight

Fondo de un contenedor

--surface--color--container

Texto de exposición

--text--color--display

Texto de interfaz

--text--color--ui

Texto de lectura

--text--color--body

Texto que anota a otro

--text--color--meta

Enlace al apuntar

--text--color--link-hover

Borde de un contenedor

--surface--border--container

Borde en reposo

--border--color--rest

Línea separadora

--border--color--divider

Fondo de la acción primaria

--action--background--primary

standout

Fondo de un contenedor

--surface--color--container

Texto de exposición

--text--color--display

Texto de interfaz

--text--color--ui

Texto de lectura

--text--color--body

Texto que anota a otro

--text--color--meta

Enlace al apuntar

--text--color--link-hover

Borde de un contenedor

--surface--border--container

Borde en reposo

--border--color--rest

Línea separadora

--border--color--divider

Fondo de la acción primaria

--action--background--primary

callout

Fondo de un contenedor

--surface--color--container

Texto de exposición

--text--color--display

Texto de interfaz

--text--color--ui

Texto de lectura

--text--color--body

Texto que anota a otro

--text--color--meta

Enlace al apuntar

--text--color--link-hover

Borde de un contenedor

--surface--border--container

Borde en reposo

--border--color--rest

Línea separadora

--border--color--divider

Fondo de la acción primaria

--action--background--primary

Los colores de una superficie

Los colores de una superficie son propios y se mantienen bajo cualquier tema. Un token que la superficie no redefina conserva el valor que el tema le da para el fondo de la página, calculado para ese fondo y no para el de la superficie.