# Sistema de design Infor ## Prévia da interface sistema de design Infor Valide um resumo e um contato, prepare uma solicitação local e limpe os dados sem enviar nada. ## Referência de design sistema de design Infor A folha de estilos de tema da tabela pública de tokens da Infor consultada nesta revisão, além de ids-enterprise-wc 1.17.1 e exemplos oficiais de entrada e botão publicados. O URL mais recente da tabela de tokens aponta para uma versão atualizada continuamente, não garante uma versão específica do pacote. ### Papéis do tema | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | Alias semântico do tema público core/light. | | --ids-color-action-stronger | var(--ids-color-blue-70) | Alias semântico do tema público core/light. | | --ids-color-background-default | var(--ids-color-white-100) | Alias semântico do tema público core/light. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Alias semântico do tema público core/light. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Alias semântico do tema público core/light. | | --ids-color-border-default | var(--ids-color-neutral-60) | Alias semântico do tema público core/light. | | --ids-color-border-weak | var(--ids-color-neutral-40) | Alias semântico do tema público core/light. | ### Valores primitivos resolvidos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-blue-70 | #0066d4 | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-neutral-100 | #161618 | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-neutral-80 | #3b3b3f | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-neutral-60 | #6f6f76 | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-neutral-10 | #f5f5f5 | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | | --ids-color-red-60 | #da1217 | Primitivo do tema público; não presuma que o valor seja o mesmo nos modos escuro ou de alto contraste. | ### Aliases de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-xs | var(--ids-space-08) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-sm | var(--ids-space-16) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-md | var(--ids-space-24) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-lg | var(--ids-space-32) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-xl | var(--ids-space-40) | Use o alias no espaçamento personalizado da aplicação. | | --ids-space-2xl | var(--ids-space-48) | Use o alias no espaçamento personalizado da aplicação. | ### Valores de espaçamento | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-space-04 | 4px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-08 | 8px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-16 | 16px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-24 | 24px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-32 | 32px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-40 | 40px | Valor de escala concreto da folha de estilos de tokens. | | --ids-space-48 | 48px | Valor de escala concreto da folha de estilos de tokens. | ### Tipografia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-font-family-sans | source sans pro | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-family-mono | source code pro | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-default | var(--ids-font-size-sm) | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-sm | var(--ids-font-size-40) | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-30 | 14px | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-40 | 16px | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-50 | 20px | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | | --ids-font-size-60 | 24px | Referência tipográfica; os arquivos de fonte precisam ser carregados separadamente. | ### Aliases de raio | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | O alias faz referência a um primitivo; não presuma que todos os controles usem o maior raio. | | --ids-border-radius-sm | var(--ids-border-radius-08) | O alias faz referência a um primitivo; não presuma que todos os controles usem o maior raio. | | --ids-border-radius-md | var(--ids-border-radius-16) | O alias faz referência a um primitivo; não presuma que todos os controles usem o maior raio. | | --ids-border-radius-lg | var(--ids-border-radius-24) | O alias faz referência a um primitivo; não presuma que todos os controles usem o maior raio. | | --ids-border-radius-circle | var(--ids-border-radius-99) | O alias faz referência a um primitivo; não presuma que todos os controles usem o maior raio. | ### Estrutura de entradas e botões | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | label | Visible input label | Use para identificar o campo; não dependa apenas do texto de placeholder. | | validate | required / email required | Regras de validação documentadas. | | readonly | true | Preserve um identificador de ativo legível e não editável. | | disabled | true | Estado de entrada indisponível, separado. | | clearable | true | Opção para limpar o campo. | | dirty-tracker | true | Rastreamento opcional de valores alterados. | | text-align | start \| center \| end | Alinhamento lógico para apresentação de texto ou números. | ### Hierarquia de ações | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | appearance | primary | Preparar o rascunho local. | | appearance | secondary | Limpar o rascunho como ação complementar. | | appearance | tertiary | Alternativa com menos destaque. | | appearance | primary-destructive / tertiary-destructive | Para ações realmente destrutivas, não para um cancelamento rotineiro. | | disabled | Boolean attribute | Estado de componente nativo indisponível. | ## Guia completo de sistema de design Infor Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Infor Um formulário empresarial com identidade de registro estável ### Mantenha o identificador do equipamento separado da solicitação editável > A Infor chama sua linguagem de design de SoHo e posiciona o IDS em torno de funções empresariais e produtividade. Este exemplo aplica essa ênfase a uma solicitação de manutenção: o identificador do ativo permanece fixo, enquanto o resumo do trabalho, o contato e a urgência são as informações editáveis da tarefa. O ID 02006 é intencionalmente uma string. Convertê-lo em número removeria o zero à esquerda e alteraria sua identidade. O exemplo nativo do IDS usa um campo de entrada somente leitura, para que o contexto do registro permaneça visível sem parecer ausente ou indisponível. Consulte a especificação de apoio ## Sistema de design Infor Aliases de tema resolvidos por meio de primitivos ### Use o alias adequado à finalidade O tema público capturado define action-default por meio de blue-60, foreground-default por meio de neutral-100 e foreground-secondary por meio de neutral-80. Essa estrutura de duas camadas mantém um formulário personalizado consistente com o tema, sem duplicar cores literais pela aplicação. A página pública de tokens oferece os modos Core, Dark e Contrast. Os valores deste guia vêm de uma captura da folha de estilos Core/light. A prévia não afirma que um valor hexadecimal de azul seja universal nos três modos; um componente em produção deve consumir seu alias semântico e deixar que o tema selecionado resolva a cor. Consulte a especificação de apoio ## Sistema de design Infor Uma escala concreta sem um sistema de densidade inventado ### Espaçamento, tipografia e raio têm conjuntos de aliases distintos Os aliases de espaçamento incluem xs no primitivo de 8 pixels, sm em 16, md em 24 e lg em 32. O CSS nativo fornecido usa md para o recuo principal e sm entre os campos. Assim, a intenção fica visível no código-fonte, enquanto a tabela de referência mantém os valores concretos. A família de fontes padrão é Source Sans Pro, com Source Code Pro para texto monoespaçado. O alias font-size-default corresponde à entrada de 16 pixels na escala. Carregar a biblioteca não dispensa o fornecimento dos arquivos de fontes descritos no README do pacote. A prévia offline usa uma fonte alternativa comum. Os nomes dos raios são distintos dos nomes de espaçamento: radius-sm corresponde a 8 pixels, enquanto space-sm corresponde a 16. Reutilizar um número de memória só porque ambos os nomes terminam em sm leva ao valor incorreto. Consulte a especificação de apoio ## Sistema de design Infor Estados de campo de entrada com significados distintos ### Somente leitura, desativado e alterado não são estados intercambiáveis Os exemplos oficiais incluem readonly, disabled, dirty-tracker, clearable, uppercase, lowercase e alinhamento lógico do texto. O exemplo de solicitação precisa apenas de readonly para a identidade do ativo e clearable para o resumo do trabalho. Ele não ativa a conversão automática de maiúsculas ou minúsculas em um e-mail nem transforma silenciosamente uma descrição de texto livre. O exemplo nativo de campo de entrada declara validate="email required" para o campo de contato. A declaração de tipo publicada fornece value, focus() e checkValidation(). Como checkValidation retorna void, o código não o interpreta incorretamente como um resultado booleano de validade do formulário; em vez disso, verifica separadamente as condições que permitem preparar o registro local. - Somente leitura mantém visível e legível um ativo fixo. - Desativado significa que o campo não pode ser usado no momento. - O rastreamento de alterações descreve a divergência em relação ao valor inicial; não é um estado de sucesso ou validação. Consulte a especificação de apoio ## Sistema de design Infor O rastreamento de alterações e a validação têm contratos diferentes ### Rastreie as edições sem tratá-las como dados válidos A galeria oficial de campos de entrada do IDS demonstra dirty-tracker="true" em um campo com valor inicial. O rastreamento de alterações diz respeito às edições de um campo; é independente do atributo validate, cujas regras email e required definem quais entradas são aceitáveis. Um campo de contato alterado ainda pode conter um endereço inválido. A declaração publicada de Input expõe checkValidation(): void. Chame-o para acionar o comportamento de validação do componente, não como condição booleana para autorizar uma ação de ordem de serviço. O exemplo nativo também verifica os valores obrigatórios da aplicação antes de gerar um rascunho. O resumo clearable e o ativo readonly demonstram duas outras capacidades independentes do campo de entrada. O rastreamento de alterações é uma extensão documentada, mas não está ativado nesta prévia. A demonstração limpa o resumo preparado após as edições e redefine o foco para o campo de resumo do trabalho; ela não informa que uma solicitação de manutenção foi salva. Consulte a especificação de apoio ## Sistema de design Infor Use uma área de trabalho em duas partes sem ocultar o formulário ### Formulário primeiro, contexto em seguida A prévia combina um formulário com um cartão compacto de contexto do equipamento e um diagrama original simples da máquina. A ordem principal de leitura permanece: título, campos, ações, resultado. Em telas estreitas, o contexto passa para baixo do formulário, em vez de comprimir os campos em colunas difíceis de ler. Os exemplos da biblioteca usam ids-layout-grid com atributos de coluna específicos para cada breakpoint. Este exemplo mantém intencionalmente um layout responsivo mais simples; sua largura máxima e seu breakpoint são valores da aplicação. Os aspectos demonstrados são os espaçamentos baseados em tokens e os rótulos de controles nativos. Consulte a especificação de apoio ## Sistema de design Infor Fixe a versão do pacote nativo e inicialize antes de ler os valores ### O pacote publicado é o ponto de entrada confiável O pacote verificado identifica a versão 1.17.1, uma entrada de módulo ES em enterprise-wc.js e o repositório de origem atual hospedado pela Infor. Portanto, o antigo endereço do GitHub não é uma instrução de instalação confiável. O código importa o pacote publicado, insere a composição e aguarda a definição dos elementos personalizados antes de associar os comportamentos. Os exemplos oficiais ao vivo incluem URLs de chunks específicas da compilação. Copiar um nome de chunk aleatório para uma aplicação a vincularia a um artefato de implantação; usando a entrada do pacote, o bundler resolve essas dependências. Este guia verifica as declarações públicas dos métodos e distingue claramente o exemplo no navegador de uma alegação de compilação nativa. 1. Instale o pacote com versão fixada no scaffold vanilla do Vite e inclua a fonte documentada de acordo com a política de recursos da aplicação. 2. Use a entrada fornecida e CSS, aguarde os elementos personalizados e, em seguida, associe as ações principal e de redefinição. 3. Teste um resumo vazio, um e-mail malformado, um rascunho local válido e uma edição posterior; confirme que o resumo exibido nunca fica desatualizado. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design sistema de design Infor ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS, baseada em valores verificados de tokens IDS core/light e em uma fonte de sistema alternativa. Não é o ambiente de execução nativo do 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.

``` Referência de código - O ativo 02006 permanece uma string. O exemplo nativo do IDS, não este formulário HTML, demonstra o registro de elementos personalizados e checkValidation(); nenhum dos dois cria uma ordem de manutenção. ### Identificador somente leitura, resumo obrigatório e validação de contato A validação de entrada do IDS é chamada explicitamente; verificações da aplicação impedem um rascunho local vazio. O texto do usuário é renderizado com 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)}
```

Referência de código

- checkValidation() retorna void; não é tratado como um resultado Boolean.

- O ativo 02006 é texto, por isso o zero inicial é preservado.

- A preparação da pré-visualização altera apenas o estado local da página.

### A aparência das ações é explícita

As variantes principal e secundária dos componentes deixam clara a ação principal do fluxo de trabalho.

```
Prepare local draft
Clear draft
```

Referência de código

- Um componente indisponível usa o estado desativado, em vez de depender apenas de um estilo esmaecido.

## Configuração do agente sistema de design Infor

### Ponto de partida para implementação

Arquivo de entrada e folha de estilos completos para uma estrutura Vite vanilla com #app. A versão do pacote e os métodos foram verificados no pacote publicado; a compilação não foi executada aqui. Disponibilize Source Sans Pro por meio de uma fonte aprovada. A pré-visualização incorporada é uma implementação nativa independente 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)}
```

### Um prompt para seu projeto

```
Crie um rascunho de manutenção do Infor IDS usando os aliases verificados do tema claro e a anatomia documentada de campos de entrada e botões. Mantenha o identificador do ativo como string e somente leitura. Valide os campos editáveis, limpe os resultados desatualizados após as edições e diferencie um rascunho local de uma ordem de serviço enviada. Não trate checkValidation() como se retornasse um Boolean.
```

## Fontes e escopo de sistema de design Infor

Guia independente de OpenDesign. O ativo e o fluxo de trabalho são fictícios; nada é enviado. O código nativo faz referência ao pacote 1.17.1 verificado, enquanto os valores dos tokens são identificados como um retrato separado e atual do tema core/light.

- Infor Design Linguagem SoHo e escopo corporativo.

- Folha de estilos de tokens atual Valores e aliases reais dos tokens core/light.

- Exemplos de campos de entrada Marcação e estados públicos dos componentes.

- Exemplos de botões Variantes de ação.

- Pacote publicado 1.17.1 Versão e ponto de entrada do módulo.

- README do pacote Instalação e requisito de fonte.

- Declarações de tipos dos campos de entrada Assinaturas de value, focus e checkValidation.

## Recursos relacionados a sistema de design Infor

### Kajabi Sage

Crie um painel de compartilhamento voltado a criadores, com contexto claro sobre o curso, ações de cópia objetivas e feedback transparente da área de transferência. Explore a anatomia dos componentes Rails do Sage, suas especificações tipográficas publicadas e a camada mais recente de tokens Pine, carregada externamente.

### Kiwi Orbit

Um guia do Orbit voltado a viagens, com cores e espaçamentos reais do produto, opções nativas de bagagem, detalhamento de preços consistente e um fluxo completo de revisão local.

### Maersk sistema de design

Conheça a linguagem de interface operacional da Maersk por meio das funções reais do tema claro, das escalas de títulos e textos, dos raios aninhados e do tratamento de identificadores. Uma consulta de remessa de exemplo demonstra a correspondência exata de referências e um histórico de eventos acessível, sem alegar acesso a dados logísticos em tempo real.


- [Referência de implementação](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)
- [Consulte a especificação de apoio](https://design.infor.com/)
- [Consulte a especificação de apoio](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Consulte a especificação de apoio](https://latest.wc.design.infor.com/ids-input/example.html)
- [Consulte a especificação de apoio](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Consulte a especificação de apoio](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Referência de código](https://latest.wc.design.infor.com/ids-input/example.html)
- [Referência de código](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Referência de código](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design Linguagem SoHo e escopo corporativo.](https://design.infor.com/)
- [Folha de estilos de tokens atual Valores e aliases reais dos tokens core/light.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Exemplos de campos de entrada Marcação e estados públicos dos componentes.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Exemplos de botões Variantes de ação.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Pacote publicado 1.17.1 Versão e ponto de entrada do módulo.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [README do pacote Instalação e requisito de fonte.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Declarações de tipos dos campos de entrada Assinaturas de value, focus e checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)