# Sistema de diseño Infor ## Vista previa de la interfaz de sistema de diseño Infor Valida un resumen y un contacto, prepara una solicitud local y bórrala sin enviar nada. ## Referencia de diseño de sistema de diseño Infor La hoja de estilos de tema de la tabla pública de tokens de Infor consultada en esta revisión, además de ids-enterprise-wc 1.17.1 y los ejemplos oficiales de entradas y botones publicados. La URL de la tabla de tokens más reciente ofrece una instantánea dinámica, no garantiza una versión del paquete. ### Roles del tema | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | Alias semántico del tema público core/light. | | --ids-color-action-stronger | var(--ids-color-blue-70) | Alias semántico del tema público core/light. | | --ids-color-background-default | var(--ids-color-white-100) | Alias semántico del tema público core/light. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Alias semántico del tema público core/light. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Alias semántico del tema público core/light. | | --ids-color-border-default | var(--ids-color-neutral-60) | Alias semántico del tema público core/light. | | --ids-color-border-weak | var(--ids-color-neutral-40) | Alias semántico del tema público core/light. | ### Valores de primitivas resueltos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-blue-70 | #0066d4 | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-neutral-100 | #161618 | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-neutral-80 | #3b3b3f | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-neutral-60 | #6f6f76 | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-neutral-10 | #f5f5f5 | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | | --ids-color-red-60 | #da1217 | Primitiva del tema público; no des por sentado que tiene el mismo valor en el modo oscuro o de alto contraste. | ### Alias de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-xs | var(--ids-space-08) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-sm | var(--ids-space-16) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-md | var(--ids-space-24) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-lg | var(--ids-space-32) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-xl | var(--ids-space-40) | Usa el alias para el espaciado personalizado de la aplicación. | | --ids-space-2xl | var(--ids-space-48) | Usa el alias para el espaciado personalizado de la aplicación. | ### Valores de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-space-04 | 4px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-08 | 8px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-16 | 16px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-24 | 24px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-32 | 32px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-40 | 40px | Valor concreto de la escala de la hoja de estilos de tokens. | | --ids-space-48 | 48px | Valor concreto de la escala de la hoja de estilos de tokens. | ### Tipografía | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-font-family-sans | source sans pro | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-family-mono | source code pro | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-default | var(--ids-font-size-sm) | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-sm | var(--ids-font-size-40) | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-30 | 14px | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-40 | 16px | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-50 | 20px | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | | --ids-font-size-60 | 24px | Referencia tipográfica; los archivos de fuentes deben cargarse por separado. | ### Alias de radio | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | El alias hace referencia a una primitiva; no des por sentado que todos los controles usan el radio más grande. | | --ids-border-radius-sm | var(--ids-border-radius-08) | El alias hace referencia a una primitiva; no des por sentado que todos los controles usan el radio más grande. | | --ids-border-radius-md | var(--ids-border-radius-16) | El alias hace referencia a una primitiva; no des por sentado que todos los controles usan el radio más grande. | | --ids-border-radius-lg | var(--ids-border-radius-24) | El alias hace referencia a una primitiva; no des por sentado que todos los controles usan el radio más grande. | | --ids-border-radius-circle | var(--ids-border-radius-99) | El alias hace referencia a una primitiva; no des por sentado que todos los controles usan el radio más grande. | ### Anatomía de entradas y botones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | label | Visible input label | Úsalo para identificar el campo, no como único texto del marcador de posición. | | validate | required / email required | Reglas de validación documentadas. | | readonly | true | Conserva un identificador de recurso legible y no editable. | | disabled | true | Estado independiente para entradas no disponibles. | | clearable | true | Opción para borrar a nivel de campo. | | dirty-tracker | true | Seguimiento opcional de los valores modificados. | | text-align | start \| center \| end | Alineación lógica para presentar texto o números. | ### Jerarquía de acciones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | appearance | primary | Preparar el borrador local. | | appearance | secondary | Borrar el borrador como acción secundaria. | | appearance | tertiary | Alternativa con menor énfasis. | | appearance | primary-destructive / tertiary-destructive | Para acciones destructivas reales, no para una cancelación rutinaria. | | disabled | Boolean attribute | Estado de componente nativo no disponible. | ## Sistema de diseño Infor Guía completa 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. ## Sistema de diseño Infor Un formulario empresarial con identidad de registro estable ### Mantén el identificador del equipo separado de la solicitud editable > Infor denomina SoHo a su lenguaje de diseño y presenta IDS como una solución centrada en las funciones empresariales y la productividad. El ejemplo aplica ese enfoque a una solicitud de mantenimiento: el identificador del activo permanece fijo, mientras que el resumen del trabajo, el contacto y la urgencia son los datos editables de la tarea. El ID 02006 es deliberadamente una cadena de texto. Convertirlo en número eliminaría el cero inicial y cambiaría su identidad. El ejemplo nativo de IDS usa un campo de entrada de solo lectura para mantener visible el contexto del registro sin que parezca un campo vacío o no disponible. Consulta la especificación complementaria ## Sistema de diseño Infor Los alias del tema se resuelven mediante primitivas ### Usa el alias que corresponda a cada función El tema público capturado define action-default mediante blue-60, el primer plano predeterminado mediante neutral-100 y el primer plano secundario mediante neutral-80. Esta estructura de dos capas permite que un formulario personalizado se integre con el tema sin duplicar colores literales por toda la aplicación. La página pública de tokens ofrece los modos Núcleo, Oscuro y Contraste. Los valores de esta guía corresponden a una captura de la hoja de estilos claro/núcleo. La vista previa no afirma que un valor hexadecimal azul sea universal en los tres modos; un componente de producción debe usar su alias semántico y dejar que el tema seleccionado lo resuelva. Consulta la especificación complementaria ## Sistema de diseño Infor Una escala concreta sin inventar un sistema de densidad ### El espaciado, la tipografía y el radio tienen conjuntos de alias distintos Los alias de espaciado incluyen xs, que corresponde a la primitiva de 8 píxeles; sm, a 16; md, a 24; y lg, a 32. El componente nativo proporcionado en CSS usa md para el margen interior principal y sm entre campos. Así, la intención queda clara en el código fuente y se conservan los valores concretos en la tabla de referencia. La familia tipográfica predeterminada es Source Sans Pro, y Source Code Pro se usa para el tipo monoespaciado. El alias font-size-default corresponde a la entrada de 16 píxeles de la escala. Cargar la biblioteca no elimina la necesidad de proporcionar los archivos de fuentes descritos en el README del paquete. La vista previa sin conexión usa una fuente alternativa común. Los nombres de radio son distintos de los nombres de espaciado: radius-sm corresponde a 8 píxeles, mientras que space-sm corresponde a 16. Reutilizar de memoria un número solo porque ambos nombres terminan en sm da un resultado incorrecto. Consulta la especificación complementaria ## Sistema de diseño Infor Estados de entrada con significados distintos ### Solo lectura, deshabilitado y con cambios no son intercambiables Los ejemplos oficiales incluyen readonly, disabled, dirty-tracker, clearable, uppercase, lowercase y alineación lógica del texto. La solicitud solo necesita readonly para la identidad del activo y clearable para el resumen del trabajo. No activa la conversión automática de mayúsculas o minúsculas en un correo electrónico ni transforma silenciosamente una descripción de texto libre. El ejemplo nativo de entrada declara validate="email required" para el campo de contacto. La declaración de tipos publicada proporciona value, focus() y checkValidation(). Como checkValidation devuelve void, el código no lo confunde con un resultado booleano de validez del formulario; en su lugar, comprueba por separado las condiciones que permiten preparar el registro local. - Solo lectura mantiene un activo fijo visible y legible. - Deshabilitado significa que el campo no se puede usar en este momento. - El seguimiento de cambios describe la diferencia respecto a un valor inicial; no es un estado de éxito ni de validación. Consulta la especificación complementaria ## Sistema de diseño Infor El seguimiento de cambios y la validación tienen funciones distintas ### Registra las ediciones sin considerarlas datos válidos La galería oficial de entradas de IDS muestra dirty-tracker="true" en un campo con un valor inicial. El seguimiento de cambios se ocupa de las modificaciones de un campo; es independiente del atributo validate, cuyas reglas email y required describen qué entradas son aceptables. Un campo de contacto modificado aún puede contener una dirección no válida. La declaración publicada de Input incluye checkValidation(): void. Llámalo para activar el comportamiento de validación del componente, no como condición booleana que autoriza una acción de orden de trabajo. El ejemplo nativo también comprueba los valores obligatorios de la aplicación antes de generar un borrador. El resumen con clearable y el activo de solo lectura muestran otras dos funciones independientes de la entrada. El seguimiento de cambios es una función documentada, pero no está activada en esta vista previa. La demostración borra el resumen preparado tras las ediciones y devuelve el foco al campo del resumen del trabajo; no indica que se haya guardado una solicitud de mantenimiento. Consulta la especificación complementaria ## Sistema de diseño Infor Usa un espacio de trabajo en dos partes sin ocultar el formulario ### Primero el formulario, después el contexto La vista previa combina un formulario con una tarjeta compacta de contexto del equipo y un diagrama original sencillo de la máquina. El orden de lectura principal sigue siendo encabezado, campos, acciones y resultado. En pantallas estrechas, el contexto se desplaza debajo del formulario en lugar de comprimir los campos en columnas ilegibles. Los ejemplos de la biblioteca usan ids-layout-grid con atributos de columna específicos para cada punto de quiebre. Este ejemplo mantiene deliberadamente un diseño adaptable más sencillo; el ancho máximo y el punto de quiebre son valores de la aplicación. Lo que se muestra aquí son los espacios basados en tokens y las etiquetas de controles nativos. Consulta la especificación complementaria ## Sistema de diseño Infor Fija el paquete nativo e inicialízalo antes de leer valores ### El paquete publicado es el punto de entrada fiable El paquete verificado indica la versión 1.17.1, una entrada de módulo ES en enterprise-wc.js y el repositorio de origen actual alojado por Infor. Por tanto, la antigua ubicación de GitHub no es una instrucción de instalación fiable. El código importa el paquete publicado, inserta la composición y espera a que se definan los elementos personalizados antes de asociar el comportamiento. Los ejemplos oficiales activos contienen URL de fragmentos específicas de cada compilación. Copiar el nombre de un fragmento al azar en una aplicación la vincularía a un artefacto de despliegue; la entrada del paquete permite que el empaquetador resuelva esas dependencias. Esta guía verifica las declaraciones públicas de métodos y mantiene el ejemplo del navegador claramente separado de cualquier afirmación de compilación nativa. 1. Instala el paquete con versión fijada en la plantilla Vanilla de Vite e incluye la fuente documentada según la política de recursos de tu aplicación. 2. Usa la entrada proporcionada y CSS, espera a que se definan los elementos personalizados y luego asocia las acciones principal y de restablecimiento. 3. Prueba un resumen vacío, un correo electrónico mal formado, un borrador local válido y una edición posterior; asegúrate de que la instantánea mostrada nunca quede desactualizada. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño sistema de diseño Infor ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente de HTML/CSS mediante valores verificados de tokens IDS core/light y una fuente del sistema como alternativa. No es el entorno de ejecución nativo de IDS. ``` Maintenance request — IDS interpretation
ASSET SERVICE / LOCAL NOTEBOOKIndependent Infor IDS interpretation

Prepare the work. Keep the context.

Build a local maintenance draft for a fixed equipment record.

Read-only record identity; leading zero preserved.

Planning urgency

Core/light IDS token values with native HTML controls and a system-font fallback. Original illustration and application layout; no native IDS runtime.

``` Referencia de código - El activo 02006 se mantiene como cadena. El ejemplo nativo de IDS, no este formulario HTML, ejercita el registro de elementos personalizados y checkValidation(); ninguno de los dos crea una orden de mantenimiento. ### Identificador de solo lectura, resumen obligatorio y validación del contacto La validación de entrada de IDS se invoca explícitamente; las comprobaciones de la aplicación impiden un borrador local vacío. El texto del usuario se representa con textContent. ``` // Vite vanilla project: npm install ids-enterprise-wc@1.17.1 // src/main.js. Add Source Sans Pro through your approved font-hosting setup. import 'ids-enterprise-wc'; import './style.css'; document.querySelector('#app').innerHTML=`

Maintenance request

Local draft only; no work order is sent.

Prepare local draft Clear draft 



`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

Referencia de código

- checkValidation() devuelve void; no se trata como un resultado booleano.

- El activo 02006 es texto, por lo que se conserva el cero inicial.

- Preparar la vista previa solo cambia el estado local de la página.

### La apariencia de las acciones es explícita

Las variantes de componentes primarios y secundarios dan al flujo de trabajo una acción principal clara.

```
Prepare local draft
Clear draft
```

Referencia de código

- Un componente no disponible usa disabled, no solo un estilo atenuado.

## Configuración del agente sistema de diseño Infor

### Punto de partida para la implementación

Entrada completa y hoja de estilos para un esqueleto vanilla de Vite con #app. La versión del paquete y los métodos se comprobaron en el paquete publicado; aquí no se ejecutó la compilación. Proporciona Source Sans Pro desde una fuente de tipografías aprobada. La vista previa integrada es una implementación nativa independiente de HTML.

```
// Vite vanilla project: npm install ids-enterprise-wc@1.17.1
// src/main.js. Add Source Sans Pro through your approved font-hosting setup.
import 'ids-enterprise-wc';
import './style.css';
document.querySelector('#app').innerHTML=`


Maintenance request
Local draft only; no work order is sent.




Prepare local draft
Clear draft



`;
await Promise.all(['ids-input','ids-button','ids-container'].map(n=>customElements.whenDefined(n)));
const summary=document.querySelector('#summary'),contact=document.querySelector('#contact');
const message=document.querySelector('#message'),draft=document.querySelector('#draft');
document.querySelector('#prepare').addEventListener('click',()=>{
 summary.checkValidation();contact.checkValidation();
 const title=summary.value.trim(),email=contact.value.trim();
 if(!title){message.textContent='Enter a work summary.';summary.focus();return;}
 if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){message.textContent='Enter a complete contact email.';contact.focus();return;}
 draft.textContent=JSON.stringify({asset:'02006',summary:title,contact:email},null,2);
 message.textContent='Draft prepared in this page only. No request sent.';
});
function clearResult(){draft.textContent='';message.textContent='';}
summary.addEventListener('input',clearResult);contact.addEventListener('input',clearResult);
document.querySelector('#reset').addEventListener('click',()=>{summary.value='';contact.value='';clearResult();summary.focus();});

/* src/style.css — application layout using the loaded IDS token roles */
main{max-width:44rem;margin:auto;padding:var(--ids-space-md);color:var(--ids-color-foreground-default-default)}
ids-input{display:block;margin-bottom:var(--ids-space-sm)}
ids-button{margin-inline-end:var(--ids-space-xs)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--ids-color-accent-neutral-weakest);padding:var(--ids-space-sm)}
```

### Una instrucción para tu proyecto

```
Crea un borrador de mantenimiento de Infor IDS con los alias verificados del tema claro y la estructura documentada de entradas y botones. Mantén el identificador del activo como cadena y en modo de solo lectura. Valida los campos editables, borra los resultados obsoletos después de las ediciones y distingue un borrador local de una orden de trabajo enviada. No trates checkValidation() como si devolviera un valor booleano.
```

## Fuentes y alcance de sistema de diseño Infor

Guía independiente de OpenDesign. El activo y el flujo de trabajo son ficticios; no se envía nada. El código nativo hace referencia al paquete 1.17.1 comprobado, mientras que los valores de los tokens se identifican como una instantánea independiente y actual del tema core/light.

- Infor Design Enfoque en SoHo y alcance empresarial.

- Hoja de estilos de tokens actual Valores reales y alias de tokens core/light.

- Ejemplos de entradas Marcado y estados públicos de los componentes.

- Ejemplos de botones Variantes de acciones.

- Paquete publicado 1.17.1 Versión y punto de entrada del módulo.

- README del paquete Requisito de instalación y tipografía.

- Declaraciones de tipos de entrada Firmas de value, focus y checkValidation.

## Recursos relacionados con sistema de diseño Infor

### Kajabi Sage

Crea un panel para compartir dirigido a creadores, con contexto claro del curso, acciones de copia evidentes y mensajes fiables sobre el portapapeles. Explora la anatomía de los componentes Rails de Sage, sus especificaciones tipográficas publicadas y la capa de tokens Pine, más reciente y cargada externamente.

### Kiwi Orbit

Una guía de Orbit centrada en viajes, con colores y espaciado reales del producto, opciones nativas de equipaje, un desglose de precios coherente y un flujo local completo de revisión.

### Maersk sistema de diseño

Analiza el lenguaje de interfaz operativa de Maersk mediante roles reales del tema claro, escalas para titulares y texto, radios anidados e identificación de referencias. Una consulta de envío de ejemplo muestra la coincidencia exacta de referencias y un historial de eventos accesible, sin afirmar que se accede a datos logísticos en tiempo real.


- [Referencia de implementación](https://latest.wc.design.infor.com/ids-input/example.html)
- [Fuente](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Fuente](https://latest.wc.design.infor.com/ids-input/example.html)
- [Fuente](https://latest.wc.design.infor.com/ids-button/example.html)
- [Consulta la especificación complementaria](https://design.infor.com/)
- [Consulta la especificación complementaria](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Consulta la especificación complementaria](https://latest.wc.design.infor.com/ids-input/example.html)
- [Consulta la especificación complementaria](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Consulta la especificación complementaria](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Referencia de código](https://latest.wc.design.infor.com/ids-input/example.html)
- [Referencia de código](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Referencia de código](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design Enfoque en SoHo y alcance empresarial.](https://design.infor.com/)
- [Hoja de estilos de tokens actual Valores reales y alias de tokens core/light.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Ejemplos de entradas Marcado y estados públicos de los componentes.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Ejemplos de botones Variantes de acciones.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Paquete publicado 1.17.1 Versión y punto de entrada del módulo.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [README del paquete Requisito de instalación y tipografía.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Declaraciones de tipos de entrada Firmas de value, focus y checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)