# Дизайн-система Infor ## Дизайн-система Infor Предварительный просмотр интерфейса Проверьте сводку и контактные данные, подготовьте локальный запрос и очистите его, не отправляя. ## Дизайн-система Infor Справочник по дизайну Таблица тем Infor с публичными токенами, прочитанная в ходе этой проверки, а также опубликованные ids-enterprise-wc 1.17.1 и официальные примеры полей и кнопок. Последний URL таблицы токенов ведёт к текущему снимку и не гарантирует соответствие версии пакета. ### Роли темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-action-stronger | var(--ids-color-blue-70) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-background-default | var(--ids-color-white-100) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-border-default | var(--ids-color-neutral-60) | Семантический псевдоним из публичной темы Core/Light. | | --ids-color-border-weak | var(--ids-color-neutral-40) | Семантический псевдоним из публичной темы Core/Light. | ### Разрешённые значения примитивов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-blue-70 | #0066d4 | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-neutral-100 | #161618 | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-neutral-80 | #3b3b3f | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-neutral-60 | #6f6f76 | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-neutral-10 | #f5f5f5 | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | | --ids-color-red-60 | #da1217 | Примитив публичной темы; не следует считать, что в режимах Dark или Contrast он имеет то же значение. | ### Псевдонимы интервалов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-space-2xs | var(--ids-space-04) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-xs | var(--ids-space-08) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-sm | var(--ids-space-16) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-md | var(--ids-space-24) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-lg | var(--ids-space-32) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-xl | var(--ids-space-40) | Используйте псевдоним для интервалов в пользовательском приложении. | | --ids-space-2xl | var(--ids-space-48) | Используйте псевдоним для интервалов в пользовательском приложении. | ### Значения отступов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-space-04 | 4px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-08 | 8px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-16 | 16px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-24 | 24px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-32 | 32px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-40 | 40px | Конкретное значение шкалы из таблицы стилей токенов. | | --ids-space-48 | 48px | Конкретное значение шкалы из таблицы стилей токенов. | ### Типографика | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-font-family-sans | source sans pro | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-family-mono | source code pro | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-default | var(--ids-font-size-sm) | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-sm | var(--ids-font-size-40) | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-30 | 14px | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-40 | 16px | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-50 | 20px | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | | --ids-font-size-60 | 24px | Типографический справочник; файлы шрифтов необходимо загружать отдельно. | ### Псевдонимы скругления | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ids-border-radius-xs | var(--ids-border-radius-04) | Псевдоним ссылается на примитив; не следует считать, что у каждого элемента управления максимально возможное скругление. | | --ids-border-radius-sm | var(--ids-border-radius-08) | Псевдоним ссылается на примитив; не следует считать, что у каждого элемента управления максимально возможное скругление. | | --ids-border-radius-md | var(--ids-border-radius-16) | Псевдоним ссылается на примитив; не следует считать, что у каждого элемента управления максимально возможное скругление. | | --ids-border-radius-lg | var(--ids-border-radius-24) | Псевдоним ссылается на примитив; не следует считать, что у каждого элемента управления максимально возможное скругление. | | --ids-border-radius-circle | var(--ids-border-radius-99) | Псевдоним ссылается на примитив; не следует считать, что у каждого элемента управления максимально возможное скругление. | ### Структура поля и кнопки | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | label | Visible input label | Используйте для идентификации поля, а не только как текст-заполнитель. | | validate | required / email required | Задокументированные правила валидации. | | readonly | true | Сохраняйте идентификатор ресурса доступным для чтения и недоступным для редактирования. | | disabled | true | Отдельное состояние недоступного поля ввода. | | clearable | true | Кнопка очистки на уровне поля. | | dirty-tracker | true | Необязательное отслеживание изменённых значений. | | text-align | start \| center \| end | Логическое выравнивание текста или числовых данных. | ### Иерархия действий | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | appearance | primary | Подготовить локальный черновик. | | appearance | secondary | Очистить черновик — вспомогательное действие. | | appearance | tertiary | Менее заметный вариант. | | appearance | primary-destructive / tertiary-destructive | Для реального намерения удалить данные, а не для обычной отмены. | | disabled | Boolean attribute | Состояние недоступного нативного компонента. | ## Дизайн-система Infor Полное руководство Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система Infor Корпоративная форма со стабильным идентификатором записи ### Храните идентификатор оборудования отдельно от редактируемой заявки > Infor называет SoHo своим языком дизайна и позиционирует IDS как систему, ориентированную на корпоративные роли и повышение продуктивности. В этом примере такой акцент применён к заявке на обслуживание: идентификатор ресурса остаётся неизменным, а описание работ, контактные данные и срочность относятся к редактируемой информации. Идентификатор 02006 намеренно задан строкой. При преобразовании в число начальный ноль будет потерян, а сам идентификатор изменится. В официальном примере IDS используется поле readonly, чтобы контекст записи оставался видимым и не выглядел как отсутствующее или недоступное поле. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Псевдонимы темы разрешаются через примитивы ### Используйте псевдоним по назначению В снимке публичной темы action-default задан через blue-60, default foreground — через neutral-100, а secondary foreground — через neutral-80. Такая двухуровневая структура помогает пользовательской форме соответствовать теме без дублирования конкретных значений цветов в приложении. На публичной странице токенов доступны режимы Core, Dark и Contrast. Значения в этом руководстве взяты из снимка таблицы стилей Core/Light. Предварительный просмотр не утверждает, что одно и то же значение синего цвета в формате hex универсально для всех трёх режимов. В рабочем компоненте следует использовать семантический псевдоним и позволить выбранной теме определить его значение. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Конкретная шкала без вымышленной системы плотности ### Для интервалов, типографики и скруглений предусмотрены отдельные группы псевдонимов Псевдонимы интервалов включают xs, соответствующий примитиву 8 пикселей, sm — 16, md — 24 и lg — 32. В предоставленном нативном CSS для основных внутренних отступов используется md, а между полями — sm. Так назначение значений явно указано в исходном коде, а в справочной таблице приведены конкретные величины. По умолчанию используется семейство шрифтов Source Sans Pro, а для моноширинного текста — Source Code Pro. Псевдоним font-size-default соответствует значению 16 пикселей в шкале. Загрузка библиотеки не отменяет необходимость предоставить файлы шрифтов, описанные в README пакета. В автономном предварительном просмотре вместо них используется обычный резервный шрифт. Названия скруглений не связаны с названиями интервалов: radius-sm соответствует 8 пикселям, а space-sm — 16. Если использовать знакомое значение только потому, что оба названия оканчиваются на sm, результат будет неверным. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Состояния полей с разным назначением ### Readonly, disabled и dirty — не взаимозаменяемые состояния В официальных примерах представлены readonly, disabled, dirty-tracker, clearable, uppercase, lowercase и логическое выравнивание текста. В заявке используются только readonly для идентификатора ресурса и clearable для описания работ. Автоматическое изменение регистра не применяется к адресу электронной почты, а текстовое описание не преобразуется незаметно для пользователя. В нативном примере для поля контактных данных указано validate="email required". В опубликованном объявлении типа предусмотрены свойства value, focus() и checkValidation(). Поскольку checkValidation возвращает void, код не использует этот метод как булев признак валидности формы, а отдельно проверяет условия, необходимые для подготовки локальной записи. - Readonly оставляет постоянный идентификатор ресурса видимым и доступным для чтения. - Disabled означает, что поле сейчас нельзя использовать. - Отслеживание изменений показывает отличие от исходного значения; это не состояние успешной валидации. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Отслеживание изменений и валидация решают разные задачи ### Отслеживайте изменения, не считая их корректными данными В официальной галерее полей IDS показан атрибут dirty-tracker="true" для поля с начальным значением. Отслеживание изменений касается редактирования поля и не зависит от атрибута validate, правила email и required которого задают допустимый ввод. Изменённое поле контактных данных всё ещё может содержать недействительный адрес. В опубликованном объявлении типа Input метод checkValidation(): void. Вызывайте его, чтобы запустить валидацию компонента, а не использовать как булево условие для разрешения действия с заказом на обслуживание. В нативном примере также проверяются обязательные значения приложения перед созданием черновика. Описание работ с возможностью очистки и идентификатор ресурса только для чтения показывают ещё две независимые возможности поля. Отслеживание изменений — задокументированное расширение, не включённое в этот предварительный просмотр. Демонстрационный пример очищает подготовленное описание после изменений и возвращает фокус в поле описания работ; он не сообщает, что заявка на обслуживание сохранена. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Используйте рабочую область из двух частей, не скрывая форму ### Сначала форма, затем контекст В предварительном просмотре форма дополнена компактной карточкой с контекстом оборудования и простой оригинальной схемой машины. Основной порядок чтения остаётся прежним: заголовок, поля, действия, результат. На узких экранах карточка перемещается под форму, а не сжимает поля в нечитаемые колонки. В примерах библиотеки используются ids-layout-grid и атрибуты колонок для разных контрольных точек. В этом примере намеренно применена более простая адаптивная компоновка; её максимальная ширина и контрольная точка определяются приложением. Здесь демонстрируются интервалы на основе токенов и подписи нативных элементов управления. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Зафиксируйте версию нативного пакета и выполните инициализацию до чтения значений ### Надёжная точка входа — опубликованный пакет Проверенные сведения о пакете указывают версию 1.17.1, точку входа ES-модуля enterprise-wc.js и актуальный исходный репозиторий на хостинге Infor. Поэтому старое расположение на GitHub не следует использовать как надёжную инструкцию по установке. Код импортирует опубликованный пакет, добавляет компоненты и дожидается регистрации пользовательских элементов, прежде чем связывать их с обработчиками. В официальных актуальных примерах используются URL фрагментов сборки, зависящие от конкретной сборки. Если скопировать в приложение случайное имя фрагмента, оно будет привязано к артефакту развёртывания; точка входа пакета позволяет сборщику разрешить эти зависимости. В руководстве проверены публичные объявления методов, а пример для браузера чётко отделён от утверждений о нативной сборке. 1. Установите зафиксированную версию пакета в базовый проект Vite с ванильным JavaScript и подключите указанный шрифт согласно политике приложения по работе с ресурсами. 2. Используйте предоставленную точку входа и CSS, дождитесь регистрации пользовательских элементов, затем свяжите основные действия и сброс. 3. Проверьте пустое описание, некорректный адрес электронной почты, корректный локальный черновик и последующее изменение; убедитесь, что отображаемый снимок данных не устаревает. Прочитать вспомогательную спецификацию ## Дизайн-система Infor Примеры компонентов дизайн-системы ### Полноценный автономный интерактивный пример Сохраните документ целиком как index.html и откройте его в браузере. Независимая интерпретация HTML/CSS с проверенными значениями токенов IDS core/light и системным шрифтом в качестве запасного. Это не нативная среда выполнения 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.

``` Справочник по коду - Asset 02006 остаётся строкой. В нативном примере IDS, а не в этой форме HTML, демонстрируются регистрация пользовательского элемента и checkValidation(); ни один из примеров не создаёт наряд на обслуживание. ### Идентификатор только для чтения, обязательная сводка и проверка контакта Проверка ввода IDS вызывается явно; приложение не позволяет сохранить пустой локальный черновик. Пользовательский текст выводится через 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)}
```

Справочник по коду

- checkValidation() возвращает void; результат не интерпретируется как логическое значение.

- Asset 02006 — это текст, поэтому начальный ноль сохраняется.

- Подготовка предварительного просмотра меняет только локальное состояние страницы.

### Внешний вид действия задан явно

Варианты компонентов для основных и второстепенных действий ясно обозначают главное действие в рабочем процессе.

```
Prepare local draft
Clear draft
```

Справочник по коду

- Для недоступного компонента используется disabled, а не только приглушённый стиль.

## Настройка агента дизайн-система Infor

### Отправная точка для реализации

Полный файл для Vite с нативной настройкой и таблицей стилей для #app. Версию пакета и методы проверили по опубликованному пакету; компиляция здесь не выполнялась. Подключите Source Sans Pro из одобренного источника шрифтов. Встроенный предварительный просмотр — независимая нативная реализация 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)}
```

### Запрос для вашего проекта

```
Создайте черновик заявки на обслуживание Infor IDS, используя проверенные псевдонимы светлой темы и документированную структуру полей ввода и кнопок. Сохраните идентификатор оборудования в виде строки и сделайте его доступным только для чтения. Проверяйте редактируемые поля, удаляйте устаревший результат после изменений и отличайте локальный черновик от отправленного наряда на обслуживание. Не считайте, что checkValidation() возвращает логическое значение.
```

## Источники и область применения дизайн-система Infor

Независимое руководство по OpenDesign. Оборудование и рабочий процесс вымышлены; данные никуда не отправляются. В нативном коде используется проверенный пакет версии 1.17.1, а значения токенов взяты из отдельного актуального снимка темы core/light.

- Infor Design Язык SoHo и корпоративная сфера применения.

- Актуальная таблица стилей токенов Фактические значения токенов core/light и их псевдонимы.

- Примеры полей ввода Разметка и состояния публичных компонентов.

- Примеры кнопок Варианты действий.

- Опубликованный пакет 1.17.1 Версия и точка входа модуля.

- Файл README пакета Установка и требования к шрифтам.

- Объявления типов для полей ввода Сигнатуры value, focus и checkValidation.

## Связанные ресурсы дизайн-система Infor

### Kajabi Sage

Создайте панель обмена для авторов с понятным контекстом курса, наглядными действиями копирования и достоверным уведомлением о состоянии буфера обмена. Изучите анатомию компонентов Sage для Rails, опубликованные спецификации типографики и более новый внешний слой токенов Pine.

### Kiwi Orbit

Руководство по Orbit для путешествий: настоящие цвета и интервалы продукта, нативный выбор багажа, единообразная разбивка стоимости и полноценный локальный процесс проверки.

### Maersk дизайн-система

Изучите язык операционного интерфейса Maersk на примере настоящих ролей светлой темы, шкал заголовков и основного текста, вложенных скруглений и обработки идентификаторов. Пример поиска отправления показывает точное совпадение по номеру и доступную историю событий, не создавая впечатления доступа к данным текущей логистики.


- [Справочник по реализации](https://latest.wc.design.infor.com/ids-input/example.html)
- [Источник](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Источник](https://latest.wc.design.infor.com/ids-input/example.html)
- [Источник](https://latest.wc.design.infor.com/ids-button/example.html)
- [Прочитать вспомогательную спецификацию](https://design.infor.com/)
- [Прочитать вспомогательную спецификацию](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Прочитать вспомогательную спецификацию](https://latest.wc.design.infor.com/ids-input/example.html)
- [Прочитать вспомогательную спецификацию](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Прочитать вспомогательную спецификацию](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Справочник по коду](https://latest.wc.design.infor.com/ids-input/example.html)
- [Справочник по коду](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)
- [Справочник по коду](https://latest.wc.design.infor.com/ids-button/example.html)
- [Infor Design Язык SoHo и корпоративная сфера применения.](https://design.infor.com/)
- [Актуальная таблица стилей токенов Фактические значения токенов core/light и их псевдонимы.](https://latest.wc.design.infor.com/ids-personalize/token-table.html)
- [Примеры полей ввода Разметка и состояния публичных компонентов.](https://latest.wc.design.infor.com/ids-input/example.html)
- [Примеры кнопок Варианты действий.](https://latest.wc.design.infor.com/ids-button/example.html)
- [Опубликованный пакет 1.17.1 Версия и точка входа модуля.](https://unpkg.com/ids-enterprise-wc@1.17.1/package.json)
- [Файл README пакета Установка и требования к шрифтам.](https://unpkg.com/ids-enterprise-wc@1.17.1/README.md)
- [Объявления типов для полей ввода Сигнатуры value, focus и checkValidation.](https://unpkg.com/ids-enterprise-wc@1.17.1/components/ids-input/ids-input.d.ts)