# Sistema di design Infor ## Sistema di design Infor Anteprima dell’interfaccia Convalida un riepilogo e un contatto, prepara una richiesta locale e cancellala senza inviare nulla. ## Sistema di design Infor Riferimento di progettazione Il foglio di stile del tema della tabella dei token pubblica di Infor consultato durante questa revisione, oltre a ids-enterprise-wc 1.17.1 pubblicato ed esempi ufficiali di input e pulsanti. L’URL più recente della tabella dei token è un’istantanea aggiornata in tempo reale, non una garanzia relativa alla versione del pacchetto. ### Ruoli del tema | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | Alias semantico del tema pubblico Core/Light. | | --ids-color-action-stronger | var(--ids-color-blue-70) | Alias semantico del tema pubblico Core/Light. | | --ids-color-background-default | var(--ids-color-white-100) | Alias semantico del tema pubblico Core/Light. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Alias semantico del tema pubblico Core/Light. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Alias semantico del tema pubblico Core/Light. | | --ids-color-border-default | var(--ids-color-neutral-60) | Alias semantico del tema pubblico Core/Light. | | --ids-color-border-weak | var(--ids-color-neutral-40) | Alias semantico del tema pubblico Core/Light. | ### Valori delle primitive risolti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-blue-70 | #0066d4 | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-neutral-100 | #161618 | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-neutral-80 | #3b3b3f | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-neutral-60 | #6f6f76 | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-neutral-10 | #f5f5f5 | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | | --ids-color-red-60 | #da1217 | Primitiva del tema pubblico; non presumere che abbia lo stesso valore nelle modalità Dark o Contrast. | ### Alias di spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-xs | var(--ids-space-08) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-sm | var(--ids-space-16) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-md | var(--ids-space-24) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-lg | var(--ids-space-32) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-xl | var(--ids-space-40) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | | --ids-space-2xl | var(--ids-space-48) | Usa l’alias per la spaziatura dell’applicazione personalizzata. | ### Valori di spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-space-04 | 4px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-08 | 8px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-16 | 16px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-24 | 24px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-32 | 32px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-40 | 40px | Valore concreto della scala del foglio di stile dei token. | | --ids-space-48 | 48px | Valore concreto della scala del foglio di stile dei token. | ### Tipografia | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-font-family-sans | source sans pro | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-family-mono | source code pro | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-default | var(--ids-font-size-sm) | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-sm | var(--ids-font-size-40) | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-30 | 14px | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-40 | 16px | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-50 | 20px | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | | --ids-font-size-60 | 24px | Riferimento tipografico; i file dei caratteri devono essere caricati separatamente. | ### Alias dei raggi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | L’alias fa riferimento a una primitiva; non presumere che ogni controllo usi il raggio più ampio. | | --ids-border-radius-sm | var(--ids-border-radius-08) | L’alias fa riferimento a una primitiva; non presumere che ogni controllo usi il raggio più ampio. | | --ids-border-radius-md | var(--ids-border-radius-16) | L’alias fa riferimento a una primitiva; non presumere che ogni controllo usi il raggio più ampio. | | --ids-border-radius-lg | var(--ids-border-radius-24) | L’alias fa riferimento a una primitiva; non presumere che ogni controllo usi il raggio più ampio. | | --ids-border-radius-circle | var(--ids-border-radius-99) | L’alias fa riferimento a una primitiva; non presumere che ogni controllo usi il raggio più ampio. | ### Struttura di input e pulsanti | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | label | Visible input label | Usalo per identificare il campo, non affidarti solo al testo segnaposto. | | validate | required / email required | Regole di convalida documentate. | | readonly | true | Mantieni leggibile l’identificativo dell’asset, senza renderlo modificabile. | | disabled | true | Stato dell’input non disponibile, distinto dagli altri. | | clearable | true | Azione per cancellare il singolo campo. | | dirty-tracker | true | Tracciamento facoltativo dei valori modificati. | | text-align | start \| center \| end | Allineamento logico per la visualizzazione di testo o numeri. | ### Gerarchia delle azioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | appearance | primary | Prepara la bozza locale. | | appearance | secondary | Cancella la bozza come azione secondaria. | | appearance | tertiary | Alternativa con enfasi ridotta. | | appearance | primary-destructive / tertiary-destructive | Per le vere azioni distruttive, non per un annullamento di routine. | | disabled | Boolean attribute | Stato non disponibile del componente nativo. | ## Sistema di design Infor Guida completa Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Infor Un modulo aziendale con identità del record stabile ### Tieni separato l’identificativo dell’attrezzatura dalla richiesta modificabile > Infor definisce SoHo il proprio linguaggio di design e struttura IDS attorno ai ruoli aziendali e alla produttività. Questo esempio applica tale enfasi a una richiesta di manutenzione: l’identificativo dell’asset resta fisso, mentre la descrizione dell’intervento, il contatto e il livello di urgenza sono le informazioni modificabili. L’ID 02006 è intenzionalmente una stringa. Convertirlo in un numero farebbe perdere lo zero iniziale e ne cambierebbe l’identità. L’esempio IDS nativo usa un input readonly, così il contesto del record resta visibile senza che il campo sembri mancante o non disponibile. Leggi la specifica di supporto ## Sistema di design Infor Gli alias del tema si risolvono tramite le primitive ### Usa l’alias in base alla sua funzione Il tema pubblico acquisito definisce action-default tramite blue-60, il primo piano predefinito tramite neutral-100 e il primo piano secondario tramite neutral-80. Questa struttura a due livelli rende un modulo personalizzato coerente con il tema, senza duplicare colori letterali nell’applicazione. La pagina pubblica dei token offre le modalità Core, Dark e Contrast. I valori di questa guida provengono da un’istantanea del foglio di stile Core/Light. L’anteprima non afferma che un valore esadecimale di blu sia universale in tutte e tre le modalità: un componente di produzione dovrebbe usare il relativo alias semantico e lasciare che sia il tema selezionato a risolverlo. Leggi la specifica di supporto ## Sistema di design Infor Una scala concreta senza inventare un sistema di densità ### Spaziatura, tipografia e raggi hanno insiemi distinti di alias Gli alias di spaziatura includono xs, corrispondente alla primitiva da 8 pixel, sm a 16, md a 24 e lg a 32. L’CSS nativo fornito usa md per il rientro principale e sm tra i campi. In questo modo l’intento è visibile nel codice sorgente e i valori concreti restano nella tabella di riferimento. La famiglia di caratteri predefinita è Source Sans Pro, mentre per il monospaziato si usa Source Code Pro. L’alias font-size-default rimanda alla voce della scala da 16 pixel. Caricare la libreria non elimina la necessità di fornire i file dei caratteri descritti nel README del pacchetto. L’anteprima offline usa invece un normale carattere di fallback. I nomi dei raggi sono distinti da quelli della spaziatura: radius-sm corrisponde a 8 pixel, mentre space-sm corrisponde a 16. Riutilizzare un valore ricordato solo perché entrambi i nomi terminano in sm porta al risultato sbagliato. Leggi la specifica di supporto ## Sistema di design Infor Stati degli input con significati diversi ### Readonly, disabled e dirty non sono intercambiabili Gli esempi ufficiali espongono readonly, disabled, dirty-tracker, clearable, uppercase, lowercase e l’allineamento logico del testo. La richiesta di esempio richiede solo readonly per l’identità dell’asset e clearable per la descrizione dell’intervento. Non attiva la conversione automatica delle maiuscole o delle minuscole per un indirizzo email e non trasforma senza avviso una descrizione a testo libero. L’esempio di input nativo dichiara validate="email required" per il campo del contatto. La dichiarazione di tipo pubblicata fornisce value, focus() e checkValidation(). Poiché checkValidation restituisce void, il codice non lo scambia per un risultato booleano di validità del modulo; verifica separatamente le condizioni necessarie per preparare il record locale. - Readonly mantiene visibile e leggibile un asset fisso. - Disabled indica che il campo non può essere usato al momento. - Il tracciamento delle modifiche descrive lo scostamento dal valore iniziale; non è uno stato di successo o di convalida. Leggi la specifica di supporto ## Sistema di design Infor Il tracciamento delle modifiche e la convalida hanno finalità diverse ### Tieni traccia delle modifiche senza considerare validi i dati La raccolta ufficiale di esempi di input IDS mostra dirty-tracker="true" su un input con un valore iniziale. Il tracciamento delle modifiche riguarda gli interventi su un campo ed è distinto dall’attributo validate, le cui regole email e required definiscono i valori accettabili. Un campo del contatto modificato può comunque contenere un indirizzo non valido. La dichiarazione pubblicata di Input espone checkValidation(): void. Chiamalo per attivare il comportamento di convalida del componente, non come condizione booleana che autorizza un’azione sull’ordine di lavoro. L’esempio nativo verifica inoltre i valori obbligatori dell’applicazione prima di produrre una bozza. Il riepilogo clearable e l’asset readonly illustrano altre due funzionalità indipendenti degli input. Il tracciamento delle modifiche è un’estensione documentata, non attivata in questa anteprima. La demo cancella il riepilogo preparato dopo le modifiche e riporta il focus sul campo della descrizione dell’intervento; non indica che una richiesta di manutenzione sia stata salvata. Leggi la specifica di supporto ## Sistema di design Infor Usa un’area di lavoro a due parti senza nascondere il modulo ### Prima il modulo, poi il contesto L’anteprima affianca al modulo una scheda compatta con il contesto dell’attrezzatura e un semplice diagramma originale della macchina. L’ordine di lettura principale resta: intestazione, campi, azioni, risultato. Sugli schermi stretti il contesto si sposta sotto il modulo, invece di comprimere gli input in colonne illeggibili. Gli esempi della libreria usano ids-layout-grid con attributi delle colonne specifici per i breakpoint. Questo esempio mantiene intenzionalmente un layout adattabile più semplice: la larghezza massima e il breakpoint sono valori dell’applicazione. Gli aspetti illustrati sono le spaziature basate sui token e le etichette dei controlli nativi. Leggi la specifica di supporto ## Sistema di design Infor Fissa la versione del pacchetto nativo e inizializzalo prima di leggere i valori ### Il pacchetto pubblicato è il punto di accesso più affidabile Il pacchetto verificato indica la versione 1.17.1, un punto di ingresso ES module in enterprise-wc.js e l’attuale repository del codice sorgente ospitato da Infor. Il vecchio percorso GitHub non è quindi un’istruzione d’installazione affidabile. Il codice importa il pacchetto pubblicato, inserisce la composizione e attende la definizione degli elementi personalizzati prima di collegare i comportamenti. Gli esempi ufficiali disponibili online contengono URL di chunk specifici della build. Copiare il nome di un chunk qualsiasi in un’applicazione la legherebbe a un artefatto di distribuzione; il punto di ingresso del pacchetto consente al bundler di risolvere queste dipendenze. Questa guida verifica le dichiarazioni pubbliche dei metodi e distingue chiaramente l’esempio nel browser da una build nativa. 1. Installa il pacchetto con versione bloccata nello scaffold vanilla di Vite e includi il carattere documentato secondo le regole per gli asset della tua applicazione. 2. Usa il punto di ingresso fornito e CSS, attendi gli elementi personalizzati, quindi collega l’azione principale e quella di ripristino. 3. Prova un riepilogo vuoto, un’email non valida, una bozza locale valida e una modifica successiva; assicurati che l’istantanea visualizzata non diventi obsoleta. Leggi la specifica di supporto ## Sistema di design Infor Esempi di componenti del sistema di design ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS basata su valori verificati dei token IDS core/light e su un font di sistema di fallback. Non è il runtime IDS nativo. ``` 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.

``` Riferimento del codice - L'asset 02006 resta una stringa. L'esempio IDS nativo, non questo modulo HTML, illustra la registrazione di custom element e checkValidation(); nessuno dei due crea un ordine di manutenzione. ### ID in sola lettura, riepilogo obbligatorio e convalida del contatto La convalida dell'input IDS viene invocata esplicitamente; i controlli dell'applicazione impediscono un salvataggio locale vuoto. Il testo dell'utente viene visualizzato 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)}
```

Riferimento del codice

- checkValidation() restituisce void; non viene interpretato come un risultato Boolean.

- L'asset 02006 è testo, quindi lo zero iniziale viene mantenuto.

- La preparazione dell'anteprima modifica solo lo stato locale della pagina.

### L'aspetto delle azioni è esplicito

Le varianti primaria e secondaria dei componenti distinguono chiaramente l'azione principale nel flusso di lavoro.

```
Prepare local draft
Clear draft
```

Riferimento del codice

- Un componente non disponibile usa lo stato disabled, non solo uno stile sbiadito.

## Configurazione dell'agente sistema di design Infor

### Punto di partenza per l’implementazione

File di ingresso e foglio di stile completi per uno scaffold Vite vanilla con #app. La versione del pacchetto e i metodi sono stati verificati nel pacchetto pubblicato; qui non è stata eseguita la compilazione. Fornisci Source Sans Pro tramite una fonte di font approvata. L'anteprima incorporata è un'implementazione nativa indipendente di 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)}
```

### Un prompt per il tuo progetto

```
Crea una bozza di manutenzione Infor IDS usando gli alias del tema chiaro verificati e la struttura documentata di input e pulsanti. Mantieni l'identificatore dell'asset come stringa e in sola lettura. Convalida i campi modificabili, cancella i risultati non più aggiornati dopo le modifiche e distingui una bozza locale da un ordine di lavoro inviato. Non considerare checkValidation() come una funzione che restituisce un Boolean.
```

## Fonti e ambito di sistema di design Infor

Guida indipendente di OpenDesign. L'asset e il flusso di lavoro sono fittizi; non viene inviato nulla. Il codice nativo fa riferimento al pacchetto 1.17.1 verificato, mentre i valori dei token sono identificati come uno snapshot distinto del tema live core/light.

- Infor Design Linguaggio SoHo e ambito aziendale.

- Foglio di stile dei token live Valori e alias effettivi dei token core/light.

- Esempi di input Markup e stati pubblici dei componenti.

- Esempi di pulsanti Varianti delle azioni.

- Pacchetto pubblicato 1.17.1 Versione e punto di ingresso del modulo.

- README del pacchetto Installazione e requisito del font.

- Dichiarazioni dei tipi di input Firme di value, focus e checkValidation.

## Risorse correlate di sistema di design Infor

### Kajabi Sage

Crea un pannello di condivisione per creator con informazioni chiare sul corso, azioni di copia immediate e riscontri affidabili sugli appunti. Esplora l’anatomia dei componenti Rails di Sage, le specifiche tipografiche pubblicate e il più recente livello di token Pine caricato esternamente.

### Kiwi Orbit

Una guida Orbit dedicata ai viaggi, con colori e spaziature effettivi del prodotto, opzioni native per i bagagli, un riepilogo dei prezzi coerente e un flusso completo di revisione locale.

### Maersk sistema di design

Esamina il linguaggio delle interfacce operative di Maersk attraverso i ruoli del tema chiaro, le scale per titoli e testo, i raggi annidati e la gestione degli identificativi. Un esempio di ricerca delle spedizioni mostra la corrispondenza esatta dei riferimenti e una cronologia degli eventi accessibile, senza dichiarare l’accesso ai dati logistici in tempo reale.


- [Riferimento per l’implementazione](https://latest.wc.design.infor.com/ids-input/example.html)
- [Fonte](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Fonte](https://latest.wc.design.infor.com/ids-input/example.html)
- [Fonte](https://latest.wc.design.infor.com/ids-button/example.html)
- [Leggi la specifica di supporto](https://design.infor.com/)
- [Leggi la specifica di supporto](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Leggi la specifica di supporto](https://latest.wc.design.infor.com/ids-input/example.html)
- [Leggi la specifica di supporto](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Leggi la specifica di supporto](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Riferimento del codice](https://latest.wc.design.infor.com/ids-input/example.html)
- [Riferimento del codice](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Riferimento del codice](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design Linguaggio SoHo e ambito aziendale.](https://design.infor.com/)
- [Foglio di stile dei token live Valori e alias effettivi dei token core/light.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Esempi di input Markup e stati pubblici dei componenti.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Esempi di pulsanti Varianti delle azioni.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Pacchetto pubblicato 1.17.1 Versione e punto di ingresso del modulo.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [README del pacchetto Installazione e requisito del font.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Dichiarazioni dei tipi di input Firme di value, focus e checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)