Surface ed elevation

Tono, confine ed elevation compongono pochi piani percettivi; lo stacking resta una responsabilità tecnica separata.

@qoovex/ui/styles/base.css

Gerarchia dei piani

Il canvas resta piatto. Contained separa con tono e bordo; soltanto interaction, floating e modal guadagnano profondità.

Superficie operativa

La struttura resta leggibile anche togliendo la shadow.

Contenuto scuro sottostante

Popup flottante

Contesto sottostante
Informazioni operative
Azioni disponibili

Piano modale

Backdrop, tono e bordo cooperano: la shadow non porta da sola la gerarchia.

Ruoli approvati

Sono combinazioni deliberate, non una matrice libera tra background e shadow. Nessuna assegna position o z-index.

Base

backgroundnone

Canvas e piano di pagina; non è un pannello.

Contained

card + bordernone

Panel e Card statiche leggibili senza shadow.

Raised

card + borderraised / sm

Superficie interattiva o temporaneamente sollevata.

Floating

popover + strong borderfloating / md

Popup che copre il contenuto sottostante.

Modal

card + strong border + backdropmodal / xl

Interruzione contestuale protetta da backdrop.

Casi difficili

Bordo e tono mantengono il confine su canvas simili, superfici annidate e quando forced colors rimuove le ombre.

Card su tono quasi identico

Il bordo porta il confine.

Contenuto contained

Floating sopra Card

Contained annidato

Cambio di piano con Motion

Motion governa presenza, transform, opacity e reversal; tono, bordo e shadow descrivono lo stato finale. Il box-shadow non viene animato frame per frame.

restinteractionleaving-basetransitionsettledreturn
Stato reale
contained
Press
rilasciato
Reduced motion
continuità spaziale
Il piano di lavoro resta fermo e mantiene la propria geometria.