# Système de design Infor ## Système de design Infor Aperçu de l’interface Valider un résumé et un contact, préparer une demande locale et l’effacer sans rien envoyer. ## Système de design Infor Référence de conception La feuille de styles du thème issue du tableau public des jetons Infor, consultée lors de cette analyse de réparation, ainsi que ids-enterprise-wc 1.17.1 publié et les exemples officiels de champs de saisie et de boutons. L’URL actuelle du tableau des jetons renvoie à un instantané actualisé en direct, et non à une garantie liée à une version du package. ### Rôles du thème | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | Alias sémantique du thème public de base/clair. | | --ids-color-action-stronger | var(--ids-color-blue-70) | Alias sémantique du thème public de base/clair. | | --ids-color-background-default | var(--ids-color-white-100) | Alias sémantique du thème public de base/clair. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Alias sémantique du thème public de base/clair. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Alias sémantique du thème public de base/clair. | | --ids-color-border-default | var(--ids-color-neutral-60) | Alias sémantique du thème public de base/clair. | | --ids-color-border-weak | var(--ids-color-neutral-40) | Alias sémantique du thème public de base/clair. | ### Valeurs primitives résolues | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-blue-70 | #0066d4 | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-neutral-100 | #161618 | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-neutral-80 | #3b3b3f | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-neutral-60 | #6f6f76 | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-neutral-10 | #f5f5f5 | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | | --ids-color-red-60 | #da1217 | Primitive du thème public ; ne pas supposer que la valeur est identique en mode sombre ou contraste. | ### Alias d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-xs | var(--ids-space-08) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-sm | var(--ids-space-16) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-md | var(--ids-space-24) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-lg | var(--ids-space-32) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-xl | var(--ids-space-40) | Utiliser l’alias pour l’espacement personnalisé de l’application. | | --ids-space-2xl | var(--ids-space-48) | Utiliser l’alias pour l’espacement personnalisé de l’application. | ### Valeurs d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-space-04 | 4px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-08 | 8px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-16 | 16px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-24 | 24px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-32 | 32px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-40 | 40px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | | --ids-space-48 | 48px | Valeur concrète de l’échelle, issue de la feuille de styles des jetons. | ### Typographie | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-font-family-sans | source sans pro | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-family-mono | source code pro | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-default | var(--ids-font-size-sm) | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-sm | var(--ids-font-size-40) | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-30 | 14px | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-40 | 16px | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-50 | 20px | Référence typographique ; les fichiers de polices doivent être chargés séparément. | | --ids-font-size-60 | 24px | Référence typographique ; les fichiers de polices doivent être chargés séparément. | ### Alias de rayon | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | L’alias renvoie à une primitive ; ne pas supposer que tous les contrôles utilisent le rayon le plus grand. | | --ids-border-radius-sm | var(--ids-border-radius-08) | L’alias renvoie à une primitive ; ne pas supposer que tous les contrôles utilisent le rayon le plus grand. | | --ids-border-radius-md | var(--ids-border-radius-16) | L’alias renvoie à une primitive ; ne pas supposer que tous les contrôles utilisent le rayon le plus grand. | | --ids-border-radius-lg | var(--ids-border-radius-24) | L’alias renvoie à une primitive ; ne pas supposer que tous les contrôles utilisent le rayon le plus grand. | | --ids-border-radius-circle | var(--ids-border-radius-99) | L’alias renvoie à une primitive ; ne pas supposer que tous les contrôles utilisent le rayon le plus grand. | ### Anatomie des champs de saisie et des boutons | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | label | Visible input label | À utiliser pour identifier le champ, et non comme simple texte indicatif. | | validate | required / email required | Règles de validation documentées. | | readonly | true | Conserver un identifiant d’équipement lisible et non modifiable. | | disabled | true | État de champ distinct pour signaler l’indisponibilité. | | clearable | true | Commande d’effacement au niveau du champ. | | dirty-tracker | true | Suivi facultatif des valeurs modifiées. | | text-align | start \| center \| end | Alignement logique du texte ou des valeurs numériques. | ### Hiérarchie des actions | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | appearance | primary | Préparer le brouillon local. | | appearance | secondary | Effacer le brouillon comme action secondaire. | | appearance | tertiary | Option de moindre importance. | | appearance | primary-destructive / tertiary-destructive | À réserver aux véritables actions destructrices, et non à une simple annulation. | | disabled | Boolean attribute | État d’indisponibilité du composant natif. | ## Système de design Infor Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Infor Un formulaire d’entreprise avec une identité de dossier stable ### Séparer l’identifiant de l’équipement de la demande modifiable > Infor présente SoHo comme son langage de conception et positionne IDS autour des rôles en entreprise et de la productivité. Cet exemple applique cette approche à une demande de maintenance : l’identifiant de l’équipement reste fixe, tandis que le résumé de l’intervention, le contact et le degré d’urgence constituent les informations modifiables. L’identifiant 02006 est volontairement une chaîne de caractères. Le convertir en nombre supprimerait le zéro initial et modifierait son identité. L’exemple IDS natif utilise un champ de saisie en lecture seule afin que le contexte du dossier reste visible sans que le champ puisse sembler manquant ou indisponible. Consultez la spécification associée ## Système de design Infor Les alias de thème sont résolus par l’intermédiaire de primitives ### Utiliser chaque alias selon sa fonction Le thème public capturé définit action-default à partir de blue-60, foreground par défaut à partir de neutral-100 et foreground secondaire à partir de neutral-80. Cette structure à deux niveaux permet à un formulaire personnalisé de rester cohérent avec son thème sans dupliquer des couleurs littérales dans toute l’application. La page publique des jetons propose les modes de base, sombre et contraste. Les valeurs de ce guide proviennent d’un instantané de la feuille de styles du mode de base/clair. L’aperçu ne prétend pas qu’une valeur hexadécimale de bleu soit universelle dans les trois modes ; un composant de production doit utiliser son alias sémantique et laisser le thème sélectionné le résoudre. Consultez la spécification associée ## Système de design Infor Une échelle concrète, sans système de densité inventé ### L’espacement, la typographie et les rayons ont des ensembles d’alias distincts Les alias d’espacement comprennent xs, associé à la primitive de 8 pixels, sm à celle de 16 pixels, md à celle de 24 pixels et lg à celle de 32 pixels. Le composant natif CSS fourni utilise md pour la marge intérieure principale et sm entre les champs. L’intention est ainsi visible dans le code source, tandis que les valeurs concrètes figurent dans le tableau de référence. La police par défaut est Source Sans Pro, et Source Code Pro est utilisée pour les caractères à chasse fixe. L’alias font-size-default renvoie à l’entrée de l’échelle de 16 pixels. Charger la bibliothèque ne dispense pas de fournir les fichiers de polices décrits dans le fichier README du package. L’aperçu hors ligne utilise plutôt une police de secours standard. Les noms des rayons sont distincts de ceux des espacements : radius-sm correspond à 8 pixels, tandis que space-sm correspond à 16 pixels. Réutiliser une valeur mémorisée simplement parce que les deux noms se terminent par sm donne un résultat incorrect. Consultez la spécification associée ## Système de design Infor Des états de saisie aux significations distinctes ### La lecture seule, la désactivation et les modifications ne sont pas interchangeables Les exemples officiels exposent les options readonly, disabled, dirty-tracker, clearable, uppercase, lowercase ainsi que l’alignement logique du texte. L’exemple de demande n’a besoin que de readonly pour l’identité de l’équipement et de clearable pour le résumé de l’intervention. Il n’active pas la mise en majuscules automatique pour une adresse e-mail et ne transforme pas silencieusement une description en texte libre. L’exemple de champ natif déclare validate="email required" pour le champ du contact. La déclaration de type publiée fournit value, focus() et checkValidation(). Comme checkValidation renvoie void, le code ne le confond pas avec un résultat booléen de validité du formulaire ; il vérifie séparément les conditions requises pour préparer le dossier local. - La lecture seule maintient l’identifiant fixe de l’équipement visible et lisible. - Désactivé signifie que le champ ne peut pas être utilisé pour le moment. - Le suivi des modifications indique qu’une valeur diffère de sa valeur initiale ; ce n’est ni un état de réussite ni un état de validation. Consultez la spécification associée ## Système de design Infor Le suivi des modifications et la validation répondent à des contrats différents ### Suivre les modifications sans les considérer comme des données valides La galerie officielle de champs IDS montre dirty-tracker="true" sur un champ doté d’une valeur initiale. Le suivi des modifications concerne les changements apportés à un champ ; il est distinct de l’attribut validate, dont les règles email et required définissent les saisies acceptables. Un champ de contact modifié peut toujours contenir une adresse invalide. La déclaration Input publiée expose checkValidation(): void. Appelez cette méthode pour déclencher le comportement de validation du composant, et non comme condition booléenne autorisant une action sur un ordre de travail. L’exemple natif vérifie également les valeurs obligatoires de l’application avant de produire un brouillon. Son résumé effaçable et son champ d’équipement en lecture seule illustrent deux autres fonctionnalités indépendantes des champs de saisie. Le suivi des modifications est une fonctionnalité documentée, mais elle n’est pas activée dans cet aperçu. La démo efface le résumé préparé après une modification et replace le focus sur le champ du résumé de l’intervention ; elle ne signale pas qu’une demande de maintenance a été enregistrée. Consultez la spécification associée ## Système de design Infor Utilisez un espace de travail en deux parties sans masquer le formulaire ### Le formulaire d’abord, le contexte ensuite L’aperçu associe un formulaire à une fiche de contexte compacte sur l’équipement et à un schéma original simple de la machine. L’ordre de lecture principal reste le même : titre, champs, actions, résultat. Sur les écrans étroits, le contexte passe sous le formulaire au lieu de comprimer les champs dans des colonnes illisibles. Les exemples de la bibliothèque utilisent ids-layout-grid avec des attributs de colonnes propres à chaque point de rupture. Cet exemple conserve volontairement une mise en page adaptative plus simple ; sa largeur maximale et son point de rupture sont définis par l’application. Les espacements basés sur des jetons et les libellés natifs des contrôles sont les éléments présentés ici. Consultez la spécification associée ## Système de design Infor Épinglez le package natif et initialisez-le avant de lire les valeurs ### Le package publié est le point d’entrée fiable Le package vérifié indique la version 1.17.1, un point d’entrée ES module nommé enterprise-wc.js et le dépôt source actuel hébergé par Infor. L’ancien emplacement GitHub ne constitue donc pas une instruction d’installation fiable. Le code importe le package publié, insère la composition et attend la définition des éléments personnalisés avant de connecter les comportements. Les exemples officiels en ligne contiennent des URL de segments propres à leur compilation. Copier le nom d’un segment au hasard dans une application la lierait à un artefact de déploiement ; le point d’entrée du package permet au bundler de résoudre ces dépendances. Ce guide vérifie les déclarations de méthodes publiques et distingue clairement l’exemple de navigateur d’une compilation native. 1. Installez le package épinglé dans le modèle Vite sans framework et incluez la police indiquée, conformément à la politique de gestion des ressources de votre application. 2. Utilisez le point d’entrée fourni et CSS, attendez les éléments personnalisés, puis associez les actions principale et de réinitialisation. 3. Testez un résumé vide, une adresse e-mail mal formée, un brouillon local valide et une modification ultérieure ; vérifiez que l’instantané affiché n’est jamais obsolète. Consultez la spécification associée ## Système de design Infor Exemples de composants du système de design ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation indépendante de HTML/CSS, fondée sur des valeurs de jetons vérifiées d’IDS core/light et sur une police système de secours. Il ne s’agit pas de l’environnement d’exécution natif d’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.

``` Référence du code - La ressource 02006 reste une chaîne de caractères. L’exemple IDS natif, et non ce formulaire HTML, met en œuvre l’enregistrement des éléments personnalisés et checkValidation() ; aucun des deux ne crée d’ordre de maintenance. ### Identifiant en lecture seule, résumé obligatoire et validation du contact La validation des champs IDS est déclenchée explicitement ; les vérifications de l’application empêchent la création d’un brouillon local vide. Le texte saisi par l’utilisateur est affiché avec 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)}
```

Référence du code

- checkValidation() ne renvoie aucune valeur ; sa valeur de retour n’est pas considérée comme un booléen.

- La ressource 02006 est du texte : le zéro initial est conservé.

- La préparation de l’aperçu ne modifie que l’état local de la page.

### L’apparence des actions est explicite

Les variantes principale et secondaire des composants donnent à la procédure une action principale claire.

```
Prepare local draft
Clear draft
```

Référence du code

- Un composant indisponible utilise disabled, et ne se contente pas d’un style estompé.

## Système de design Infor Configuration de l’agent IA

### Point de départ de l’implémentation

Code complet et feuille de style pour un modèle Vite sans framework avec #app. La version du package et les méthodes ont été vérifiées dans le package publié ; aucune compilation n’a été effectuée ici. Fournissez Source Sans Pro depuis une source de polices approuvée. L’aperçu intégré est une implémentation indépendante en HTML natif.

```
// 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 pour votre projet

```
Créez un brouillon de maintenance Infor IDS à l’aide des alias vérifiés du thème clair et de la structure documentée des champs et boutons. Conservez l’identifiant de ressource sous forme de chaîne en lecture seule. Validez les champs modifiables, effacez le résultat obsolète après toute modification et distinguez un brouillon local d’un ordre de travail soumis. Ne considérez pas que checkValidation() renvoie un booléen.
```

## Système de design Infor Sources et périmètre

Guide indépendant sur OpenDesign. L’équipement et la procédure sont fictifs ; aucune donnée n’est soumise. Le code natif fait référence au package 1.17.1 vérifié, tandis que les valeurs des jetons sont identifiées séparément comme un instantané du thème core/light en ligne.

- Infor Design Langage SoHo et périmètre d’entreprise.

- Feuille de style des jetons en ligne Valeurs et alias réels des jetons core/light.

- Exemples de champs Balisage et états publics des composants.

- Exemples de boutons Variantes d’action.

- Package publié 1.17.1 Version et point d’entrée du module.

- Fichier README du package Installation et police requise.

- Déclarations de type des champs Signatures de value, focus et checkValidation.

## Système de design Infor Ressources associées

### Kajabi Sage

Créez un panneau de partage destiné aux créateurs, avec un contexte de cours facile à comprendre, des actions de copie claires et un retour honnête sur le presse-papiers. Découvrez l’anatomie des composants Rails de Sage, ses spécifications typographiques publiées et la couche de tokens Pine, plus récente et chargée depuis l’extérieur.

### Kiwi Orbit

Un guide Orbit axé sur le voyage, avec les couleurs et espacements réels du produit, des choix de bagages natifs, un récapitulatif de prix cohérent et un parcours complet de vérification en local.

### Maersk système de design

Découvrez le langage d’interface opérationnel de Maersk à travers les rôles du thème clair, les échelles de titres et de texte, les rayons imbriqués et la gestion des identifiants. Un exemple de recherche d’expédition montre la correspondance exacte des références et un historique des événements accessible, sans prétendre accéder aux données logistiques en direct.


- [Référence de mise en œuvre](https://latest.wc.design.infor.com/ids-input/example.html)
- [Source](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Source](https://latest.wc.design.infor.com/ids-input/example.html)
- [Source](https://latest.wc.design.infor.com/ids-button/example.html)
- [Consultez la spécification associée](https://design.infor.com/)
- [Consultez la spécification associée](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Consultez la spécification associée](https://latest.wc.design.infor.com/ids-input/example.html)
- [Consultez la spécification associée](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Consultez la spécification associée](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Référence du code](https://latest.wc.design.infor.com/ids-input/example.html)
- [Référence du code](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Référence du code](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design Langage SoHo et périmètre d’entreprise.](https://design.infor.com/)
- [Feuille de style des jetons en ligne Valeurs et alias réels des jetons core/light.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Exemples de champs Balisage et états publics des composants.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Exemples de boutons Variantes d’action.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Package publié 1.17.1 Version et point d’entrée du module.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Fichier README du package Installation et police requise.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Déclarations de type des champs Signatures de value, focus et checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)