# Sistema de diseño Esri Calcite ## Vista previa de interfaz del sistema de diseño Esri Calcite Selecciona un sitio de la lista o del esquema, filtra los estados de revisión y valida una nota que se conserva por sitio hasta que se vuelva a cargar la página. ## Referencia de diseño del sistema de diseño Esri Calcite Tokens de diseño de Calcite 4.1.0 y API de componentes actuales, contrastados con Components 5.1.2. El paquete de tokens y el paquete de componentes tienen números de versión distintos. La muestra integrada es una interpretación original de HTML/CSS; no redistribuye el entorno de ejecución de Calcite ni afirma reproducir el comportamiento nativo. ### Superficies, texto e interacción del tema claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --calcite-color-surface-1 | #f7f7f7 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-surface-2 | #ffffff | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-surface-3 | #f2f2f2 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-surface-4 | #ebebeb | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-surface-highlight | #d6efff | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-text-1 | #141414 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-text-2 | #4a4a4a | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-text-3 | #6b6b6b | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-text-inverse | #ffffff | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-text-link | #00619b | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-border-1 | #d4d4d4 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-border-2 | #dedede | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-border-3 | #ebebeb | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-border-input | #949494 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-brand | #007ac2 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-brand-hover | #00619b | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | | --calcite-color-brand-press | #004874 | Referencia semántica de la función indicada por el token; la selección y los bordes de los campos necesitan niveles de contraste distintos. | ### Escala de espaciado actual | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --calcite-space-none | 0 | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-px | 1px | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-base | 2px | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-2xs | 0.25rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-xs | 0.375rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-sm | 0.5rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-sm-plus | 0.625rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-md | 0.75rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-md-plus | 0.875rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-lg | 1rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-xl | 1.25rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-2xl | 1.5rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-3xl | 2rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | | --calcite-space-4xl | 2.75rem | Familia actual de tokens de espacio. Los incrementos en rem siguen el tamaño raíz; evita mezclarlos con alias de espaciado obsoletos. | ### Escala tipográfica y de esquinas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --calcite-corner-radius-none | 0 | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-corner-radius-xs | 2px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-corner-radius-sm | 4px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-corner-radius-pill | 9999px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-xs | 10px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-sm | 12px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size | 14px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-md | 16px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-lg | 18px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-xl | 20px | Valores publicados, no mediciones deducidas de una captura de pantalla. | | --calcite-font-size-2xl | 24px | Valores publicados, no mediciones deducidas de una captura de pantalla. | ### Componente de entrada API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | scale | s / m / l; default m | Cambia deliberadamente la escala del componente; no es lo mismo que cambiar el zoom de la página. | | status | idle / valid / invalid | Indica si el campo es válido mediante un mensaje, no solo con el color. | | labelText | string | Texto de etiqueta visible en la entrada actual API. | | validationMessage | string | Explica junto al control por qué la entrada no es válida. | | calciteInputInput | event | Lee event.target.value mientras el usuario escribe. | | setFocus() | Promise | Devuelve el foco al componente nativo tras un error de validación de la aplicación. | ## Guía completa del sistema de diseño de Esri Calcite Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Arquitectura del espacio de trabajo y los paneles del sistema de diseño de Esri Calcite ### Mantén visible el contexto del objeto > Una tarea espacial suele tener al menos dos contextos: el área que se está inspeccionando y el objeto seleccionado. El ejemplo mantiene una pequeña lista de sitios junto a un esquema original y un inspector. Al seleccionar una fila de la lista o un marcador, se establece el mismo ID de sitio estable, de modo que el nombre, el estado y la nota no puedan referirse por error a objetos distintos. ### Separa la ilustración de un mapa real El SVG muestra la relación entre una lista y una superficie espacial. No tiene proyección, coordenadas, capas, zoom, geocodificación ni rutas. El pie visible indica que es un esquema y que no está a escala. Una vista de ArcGIS en producción requiere su propia integración con el SDK, datos y trabajo de accesibilidad; el contenedor de Calcite por sí solo no proporciona esas capacidades. ## Roles semánticos del color en el sistema de diseño de Esri Calcite ### Usa superficies para separar herramientas sin recurrir a tarjetas pesadas La referencia diferencia surface-1 a surface-4 y reserva surface-highlight para destacar elementos. El ejemplo usa un inspector blanco sobre un fondo blanquecino discreto y una fila seleccionada de color azul pálido. Los bordes neutros y finos delimitan los paneles sin añadir una tarjeta flotante alrededor de cada campo. ### Asigna al azul un significado de interacción coherente Los colores de marca, al pasar el cursor y al presionar forman una secuencia cada vez más oscura: #007ac2, #00619b y #004874. El marcador seleccionado y la acción principal de guardar usan esa gama para distintos roles de interacción. Los estados de revisión escritos y el mensaje de validación de la nota siguen siendo legibles sin depender únicamente del color. ## Tipografía y densidad de información del sistema de diseño de Esri Calcite ### Conserva la jerarquía de información en tamaños pequeños Las referencias absolutas de tipografía publicadas incluyen texto pequeño de 12px, texto base de 14px, tamaño medio de 16px y extragrande de 20px. El ejemplo combina un título de espacio de trabajo de 20px con encabezados de panel de 16px y controles de 14px. Los metadatos son más pequeños, pero nunca son el único elemento que identifica el objeto seleccionado. ### Distingue la fuente alternativa de la fuente de marca Este ejemplo independiente usa Arial y fuentes alternativas del sistema. No incluye fuentes de marca de Esri ni presenta la alternativa como Avenir. Una integración nativa autorizada debe seguir las instrucciones de configuración de recursos y temas de la versión fijada de Calcite. Cambiar la fuente puede afectar los saltos de línea y el ancho de los controles, así que prueba el conjunto de recursos que se implementará realmente. ## Tokens de espaciado y paneles adaptables del sistema de diseño de Esri Calcite ### Elige los nombres de token actuales La referencia usa la escala actual --calcite-space-*, que combina valores en píxeles para los pasos más pequeños y valores en rem para los espacios mayores. Usa estos roles con nombre de forma coherente al implementar un tema nativo. El diseño de la aplicación en este ejemplo usa valores explícitos CSS para poder ejecutarse sin importar paquetes restringidos. ### Reorganiza el inspector antes de comprimir el campo En el punto de quiebre original de la aplicación, el inspector se desplaza debajo de la lista y la ilustración. En un teléfono estrecho, las tres regiones forman una secuencia vertical. El área de texto conserva todo el ancho, junto con su etiqueta, texto de ayuda y acción para guardar. Estos puntos de quiebre son decisiones de diseño de la aplicación, no valores atribuidos a tokens de Calcite. ## Comportamiento de selección y filtrado del sistema de diseño de Esri Calcite ### Usa un único identificador para la selección La lista y el esquema comparten la selección mediante A-01, B-02 y C-03, no mediante su posición actual en el arreglo. Al filtrar por Checked, se selecciona el sitio coincidente disponible y el inspector se actualiza. Los estados de pulsación se exponen tanto en el botón de la lista como en el marcador correspondiente. ### Mantén las notas guardadas separadas de los borradores sin guardar Las notas guardadas se almacenan en un Map identificado por el ID del sitio. Al volver a ese sitio, se restaura la nota; al cambiar de sitio sin guardar, el texto sin guardar se reemplaza. El texto de ayuda indica explícitamente que los datos solo se conservan de forma local. Un editor de producción debería proteger los cambios sin guardar si perder un borrador tuviera consecuencias importantes. ## Validación y recuperación de entradas en el sistema de diseño de Esri Calcite ### Al adoptar Calcite, usa el componente de entrada nativo real API El ejemplo nativo usa labelText, value, status y validationMessage. El evento calciteInputInput puede borrar un error obsoleto, mientras que setFocus() devuelve el foco al componente tras una regla de validación de la aplicación no superada. Estos son nombres públicos de API, a diferencia de acceder a un input interno dentro del shadow root. ### No confundas la confirmación local con la persistencia en un servicio La vista previa independiente exige al menos diez caracteres después de eliminar los espacios iniciales y finales y limita el campo a 240 caracteres. La confirmación identifica el sitio e indica explícitamente que el guardado es local. Al recargar, se borran las notas. Una versión conectada a la red necesitaría gestionar estados pendientes, errores, reintentos y conflictos; el mensaje de guardado local no implica nada de eso. 1. Intenta guardar una nota vacía o demasiado breve y lee el error. 2. Escribe una nota más larga, guárdala, selecciona otro sitio y vuelve al anterior. 3. Recarga la página para confirmar que el ejemplo no promete persistencia. ## Alternativas espaciales accesibles del sistema de diseño de Esri Calcite ### Ofrece una alternativa en forma de lista para cada marcador Cada marcador interactivo tiene un botón de texto en la lista de sitios. Por tanto, el mapa ilustrado no es la única forma de seleccionar un objeto. El SVG incluye una descripción breve, mientras que los controles tienen nombres propios e indicadores de foco visibles. Un mapa real requiere mucho más que copiar el texto alternativo del esquema. ### Coloca la validación junto al campo El área de texto referencia tanto el texto de ayuda como el error mediante aria-describedby. Si se produce un error, recibe aria-invalid y el foco; al editarla, se elimina el estado de invalidez obsoleto. La confirmación usa una región de estado. Los usuarios de teclado pueden seleccionar un sitio, escribir una nota y guardarla sin interactuar con una forma geográfica dibujada. ## Límites de versión e integración del sistema de diseño de Esri Calcite ### Fija las versiones de los paquetes y consulta los requisitos de licencia Components 5.1.2 y design tokens 4.1.0 son paquetes distintos. La página de licencias actual describe la disponibilidad con una cuenta de ArcGIS Online, Enterprise o Location Platform. No des por sentado que una versión de código abierto anterior se aplica al paquete actual. El código fuente nativo siguiente es para un proyecto que cumple esos requisitos. - Components: 5.1.2. - Referencia de design tokens: 4.1.0. - Vista previa: HTML, CSS y JavaScript independientes; sin entorno de ejecución de Esri. ### Registra solo los componentes que utilices El ejemplo mínimo de módulos importa los puntos de entrada de los componentes de entrada y botón y, después, utiliza sus propiedades y eventos públicos. El ejemplo completo e independiente de HTML funciona por sí solo; el fragmento nativo es una alternativa para un proyecto de Vite con el paquete fijado instalado. Se ha comprobado con el API público; no se presenta como el entorno de ejecución compilado tras el esquema. ## Ejemplos de componentes del sistema de diseño Esri Calcite ### Muestra independiente para inspeccionar el sitio Ejemplo completo e independiente de HTML, CSS y JavaScript utilizado en esta vista previa. Guárdalo como index.html y ábrelo en un navegador. ``` Site inspection panel

Field inspection workspace

Original Calcite-inspired layout study · fictional site data

Local notes only
Schematic illustration · not to scale
``` Referencia de código - Esquema y comportamiento de la aplicación originales. No incluye SDK de mapas, datos remotos ni entorno de ejecución de Esri. ### Alternativa nativa con Calcite input Reemplaza src/main.js en un proyecto vanilla de Vite cuyo index.html contenga
. ``` import "@esri/calcite-components/components/calcite-input"; import "@esri/calcite-components/components/calcite-button"; document.querySelector("#app").innerHTML = ` Validate note

`; const field = document.querySelector("#inspection-note"); const result = document.querySelector("#result"); field.addEventListener("calciteInputInput", () => { field.status = "idle"; result.textContent = ""; }); document.querySelector("#save-note").addEventListener("click", async () => { if (field.value.trim().length < 10) { field.status = "invalid"; await field.setFocus(); return; } field.status = "valid"; result.textContent = "The note passes the local rule. Nothing was sent."; }); ``` Referencia de código - Instala @esri/calcite-components@5.1.2 después de revisar los requisitos de licencia actuales. Esta alternativa se comprobó con API; la vista previa independiente anterior es la muestra probada en el navegador. ## Configuración del agente del sistema de diseño Esri Calcite ### Punto de partida para la implementación El paquete de componentes nativos requiere una cuenta de ArcGIS que cumpla los requisitos de las condiciones de licencia actuales. Si alojas los recursos de los componentes por tu cuenta, revisa los requisitos de las rutas de recursos. ``` # Independent specimen: save the complete HTML example as index.html. # Native alternative for an appropriately licensed project: npm create vite@latest calcite-note -- --template vanilla cd calcite-note npm install npm install @esri/calcite-components@5.1.2 # Replace src/main.js with the native input example. npm run dev ``` ### Una instrucción para tu proyecto ``` Crea un espacio de trabajo específico para inspeccionar ubicaciones mediante las referencias de Calcite. Mantén coherente el ID del objeto seleccionado entre la lista y el panel de inspección, muestra los estados por escrito y distingue las notas locales de la persistencia en el servicio. Usa la interpretación independiente como punto de partida o elige deliberadamente la ruta de componentes nativos con licencia. No describas el esquema original como un mapa de ArcGIS. ``` ## Fuentes y alcance del sistema de diseño Esri Calcite Guía de la aplicación OpenDesign. El ejemplo ilustrado está implementado de forma independiente y usa datos ficticios. El uso actual de Calcite se rige por las licencias de Esri y requiere una cuenta de ArcGIS que cumpla los requisitos; el ejemplo de integración nativa es una alternativa para proyectos con la licencia correspondiente, no el entorno de ejecución de esta vista previa. - Calcite Input API Propiedades del campo, eventos y método de enfoque. - Primeros pasos con Calcite Registro de componentes y configuración de recursos. - Licencias actuales Requisitos de cuenta de ArcGIS y uso. - Design tokens publicados Referencias fijadas de tipografía, espaciado y radio. ## Recursos relacionados del sistema de diseño Esri Calcite ### GitLab Pajamas Una guía de Pajamas para flujos de trabajo técnicos: tokens semánticos reales, tipografía y espaciado fluidos, un inspector de canalización por etapas, mensajes de error fáciles de leer y una simulación de reintento explícitamente local. ### HPE Grommet Modela una reserva de capacidad con las primitivas de diseño de Grommet, campos de formulario controlados e indicadores numéricos. Usa deliberadamente la escala del tema y distingue el tema base de Grommet del tema de HPE, que se instala por separado. ### Infor sistema de diseño Crea un formulario de mantenimiento empresarial con estados reales de entrada de IDS, alias de tema y un identificador de recurso exacto. Inspecciona los tokens del tema público actual, un paquete de Web Components fijado en una versión concreta y un flujo local de borradores con validación y restablecimiento. - [Referencia de implementación](https://developers.arcgis.com/calcite-design-system/) - [Fuente](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Fuente](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css) - [Fuente](https://developers.arcgis.com/calcite-design-system/components/input/) - [Referencia de código](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/light.css) - [Referencia de código](https://developers.arcgis.com/calcite-design-system/components/input/) - [Calcite Input API Propiedades del campo, eventos y método de enfoque.](https://developers.arcgis.com/calcite-design-system/components/input/) - [Primeros pasos con Calcite Registro de componentes y configuración de recursos.](https://developers.arcgis.com/calcite-design-system/get-started/) - [Licencias actuales Requisitos de cuenta de ArcGIS y uso.](https://developers.arcgis.com/calcite-design-system/resources/licensing/) - [Design tokens publicados Referencias fijadas de tipografía, espaciado y radio.](https://cdn.jsdelivr.net/npm/@esri/calcite-design-tokens@4.1.0/dist/css/global.css)