Componentes visibles
Compara los niveles raised, inset y floating en paralelo. La segunda fila aplica getCrmPlasticSurfaceStyle a tres acentos, con adaptación al tema. El ejemplo final combina CrmSectionCard, acciones y controles dentro de una superficie inset.
La tarjeta LeadAssociatedCard separa el icono de la entidad de su detalle: éste admite texto o contenido con un icono de relación junto a su etiqueta.
Cuándo usar
Agrupa contenido en raised, controles en inset y contenido superpuesto en floating. El helper de superficies plásticas compone acentos cuando una primitiva existente no cubre la necesidad.
Propiedades y variantes
| Propiedad | Contrato |
|---|---|
elevation | raised por defecto; floating en CrmRaisedSurface. |
children / className | Contenido y geometría contextual; no reemplazar sombras. |
getCrmPlasticSurfaceStyle | Recibe surface y border para un acento plástico. |
Estados y accesibilidad
Son contenedores, no controles: no añaden por sí mismos interacción ni significado accesible. Usa encabezados y etiquetas para explicar los grupos.
LeadAssociatedCard.detail admite ReactNode. Acompaña el icono de relación con texto y marca el icono como aria-hidden. Sin onOpen, la tarjeta es una presentación no interactiva que puede colocarse dentro de un enlace accesible; evita anidar botones dentro de ese enlace.
Evitar
No conviertas un div con sombra en botón. No copies recetas box-shadow ni uses floating para todas las tarjetas.
Radios por función
CrmRaisedSurface parte de --vee-radius-card (24 px) y CrmInsetSurface
de --vee-radius-control (14 px). Un contenedor inset que agrupa campos usa
el radio de card; un dropdown compacto usa --vee-radius-panel (16 px).
La demo compara las superficies con el mismo radio de card.
Tarjetas Kanban
getKanbanCardSurfaceClassName reutiliza raised: radio de card y padding de
20 px en normal; radio de panel y padding de 12 px en compacta. Los títulos
comparten KANBAN_CARD_TITLE_TEXT_CLASS_NAME (16 px, semibold).
La composición mantiene el tipo como texto con acento, los campos inline
transparentes y el valor esperado verde. OpportunityContactField admite
showAvatar para la persona asociada y showLabel para su etiqueta.
LeadCardRotatingFooter presentation="plain" integra porcentaje y barra en
la tarjeta, conservando el menú de edición. La demo muestra esta jerarquía con
datos ficticios; las tarjetas reales conservan sus colores de estado.
CardInfoChip isLeadValue comparte la altura mínima de 36 px y el padding de
los campos Kanban; vee-glass-value conserva el tinte verde sobre los mismos
reflejos y sombra glass global, también en las demos y vistas previas.
Los widgets compactos de métricas y resúmenes por periodo usan CRM_GLASS_SURFACE_CLASS_NAME, una variante más translúcida del material de campos (CRM_GLASS_INPUT_SURFACE_CLASS_NAME) con borde más tenue. Los contenedores glass se pueden anidar; no usan la exclusión de capas internas de los controles compuestos. Reutiliza los tokens globales para fondo translúcido, reflejo tenue, borde sutil y relieve exterior en ambos temas; conserva los colores semánticos de ingresos y egresos. FinanceOperationsSummary y FinanceAccountMetricsSummary lo usan para sus contenedores de resumen; los bloques mensuales y trimestrales sustituyen el acabado inset por glass.
