# Infor 디자인 시스템 ## Infor 디자인 시스템 인터페이스 미리보기 요약과 연락처를 확인하고, 로컬 요청을 작성한 다음 아무것도 전송하지 않고 지우세요. ## Infor 디자인 시스템 디자인 참고 자료 이번 수정 작업에서 확인한 공개 Infor 토큰 테이블 테마 스타일시트와 게시된 ids-enterprise-wc 1.17.1, 공식 입력 및 버튼 예제를 바탕으로 합니다. 최신 토큰 테이블 URL은 실시간 스냅샷이며 패키지 버전을 보장하지 않습니다. ### 테마 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ids-color-action-default | var(--ids-color-blue-60) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-action-stronger | var(--ids-color-blue-70) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-background-default | var(--ids-color-white-100) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-foreground-default-default | var(--ids-color-neutral-100) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-foreground-default-secondary | var(--ids-color-neutral-80) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-border-default | var(--ids-color-neutral-60) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | | --ids-color-border-weak | var(--ids-color-neutral-40) | 공개 코어/라이트 테마의 시맨틱 별칭입니다. | ### 확정된 프리미티브 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ids-color-blue-60 | #0072ed | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-blue-70 | #0066d4 | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-neutral-100 | #161618 | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-neutral-80 | #3b3b3f | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-neutral-60 | #6f6f76 | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-neutral-10 | #f5f5f5 | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | | --ids-color-red-60 | #da1217 | 공개 테마의 프리미티브입니다. 다크 모드나 고대비 모드에서도 같은 값이라고 가정하지 마세요. | ### 간격 별칭 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --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를 엔터프라이즈 역할과 생산성에 중점을 둔 시스템으로 소개합니다. 이 견본은 이러한 방향을 유지보수 요청에 적용합니다. 자산 식별자는 고정하고 작업 요약, 연락처, 긴급도만 수정 가능한 입력 정보로 둡니다. ID 02006은 의도적으로 문자열로 처리합니다. 숫자로 변환하면 앞의 0이 사라져 식별자가 달라집니다. 네이티브 IDS 예제에서는 읽기 전용 입력을 사용해 레코드 정보를 계속 표시하면서도 필드가 비어 있거나 사용할 수 없는 것처럼 보이지 않게 합니다. 지원 사양 읽기 ## Infor 디자인 시스템 테마 별칭은 프리미티브를 통해 값을 결정합니다 ### 용도에 맞는 별칭을 사용하세요 캡처한 공개 테마에서는 기본 작업 색상을 blue-60, 기본 전경색을 neutral-100, 보조 전경색을 neutral-80으로 정의합니다. 이 두 단계 구조를 사용하면 애플리케이션 곳곳에 리터럴 색상을 중복해서 쓰지 않고도 맞춤 양식을 테마에 맞출 수 있습니다. 공개 토큰 페이지에서는 Core, Dark, Contrast 모드를 제공합니다. 이 가이드의 값은 해당 페이지의 코어/라이트 스타일시트 스냅샷에서 가져왔습니다. 미리보기는 파란색 헥스 값이 세 모드에서 모두 동일하다고 주장하지 않습니다. 프로덕션 컴포넌트에서는 시맨틱 별칭을 사용하고 선택한 테마가 값을 결정하도록 해야 합니다. 지원 사양 읽기 ## Infor 디자인 시스템 임의로 만든 밀도 체계 없이 구체적인 스케일 사용하기 ### 간격, 타이포그래피, 모서리 반경에는 각각 별도의 별칭 세트가 있습니다 간격 별칭에는 8픽셀 프리미티브를 사용하는 xs, 16픽셀의 sm, 24픽셀의 md, 32픽셀의 lg가 있습니다. 제공된 네이티브 CSS에서는 주요 안쪽 여백에 md를, 필드 사이 간격에 sm을 사용합니다. 이렇게 하면 참조 표의 구체적인 값을 유지하면서 소스 코드에 의도를 드러낼 수 있습니다. 기본 글꼴은 Source Sans Pro이고 고정폭 글꼴은 Source Code Pro입니다. font-size-default 별칭은 16픽셀 스케일 항목을 가리킵니다. 패키지 README에 설명된 글꼴 에셋을 별도로 제공해야 하며, 라이브러리를 불러온다고 이 과정이 생략되지는 않습니다. 오프라인 미리보기에서는 일반적인 대체 글꼴을 사용합니다. 모서리 반경 이름은 간격 이름과 별개입니다. radius-sm은 8픽셀, space-sm은 16픽셀에 해당합니다. 두 이름 모두 sm으로 끝난다는 이유로 기억해 둔 숫자를 재사용하면 잘못된 값이 적용됩니다. 지원 사양 읽기 ## Infor 디자인 시스템 각기 다른 의미를 전달하는 입력 상태 ### 읽기 전용, 비활성화, 변경됨 상태는 서로 바꿔 쓸 수 없습니다 공식 예제에서는 읽기 전용, 비활성화, 변경 추적, 지우기 가능, 대문자, 소문자, 논리적 텍스트 정렬 기능을 보여 줍니다. 요청 예제에서는 자산 식별자에 읽기 전용을, 작업 요약에 지우기 가능 상태를 사용하면 됩니다. 이메일 입력에 자동 대소문자 변환을 적용하거나 자유 형식 설명을 사용자 모르게 변환하지 않습니다. 네이티브 입력 예시에서는 연락처 필드에 validate="email required"를 선언합니다. 공개된 타입 선언에는 value, focus(), checkValidation()이 포함되어 있습니다. checkValidation은 void를 반환하므로 Boolean 형식의 폼 유효성 결과로 오인하지 않고, 로컬 기록을 준비할 수 있는 조건을 별도로 확인합니다. - 읽기 전용으로 설정하면 고정 자산을 계속 표시하고 읽을 수 있습니다. - 비활성화된 필드는 현재 사용할 수 없습니다. - 변경 추적은 초기값과 달라진 상태를 나타내며, 성공 또는 유효성 상태를 뜻하지 않습니다. 지원 사양 읽기 ## Infor 디자인 시스템 변경 추적과 유효성 검사는 서로 다른 계약입니다 ### 데이터의 유효성을 단정하지 않고 편집 내용을 추적합니다 공식 IDS 입력 갤러리에서는 초기값이 있는 입력에 dirty-tracker="true"를 적용한 예시를 보여줍니다. 변경 추적은 필드의 편집 여부에 관한 기능이며, 허용되는 입력값을 정의하는 email 및 required 규칙의 validate 속성과는 별개입니다. 연락처 필드를 수정했더라도 주소가 유효하지 않을 수 있습니다. 공개된 Input 선언에는 checkValidation(): void가 정의되어 있습니다. 이 메서드는 컴포넌트의 유효성 검사 동작을 실행하는 데 사용하며, 작업 지시 동작을 허용하는 Boolean 조건으로 사용하지 않습니다. 네이티브 예시에서도 초안을 만들기 전에 애플리케이션에서 필수 값을 확인합니다. 지우기 기능이 있는 요약 필드와 읽기 전용 자산 필드는 서로 독립적인 입력 기능을 보여줍니다. 변경 추적은 문서화된 확장 기능이며, 이 미리보기에서는 활성화되어 있지 않습니다. 데모는 편집 후 준비된 요약을 지우고 작업 요약 필드에 포커스를 다시 맞춥니다. 유지보수 요청이 저장되었다고 알리지는 않습니다. 지원 사양 읽기 ## Infor 디자인 시스템 양식을 숨기지 않고 두 영역으로 구성된 작업 공간을 만듭니다 ### 양식을 먼저, 맥락 정보를 다음에 배치합니다 미리보기에는 양식과 간결한 장비 정보 카드, 간단한 독창적인 기계 도해가 함께 표시됩니다. 기본 읽기 순서는 제목, 필드, 동작, 결과입니다. 화면 너비가 좁아지면 입력란을 읽기 어려운 열에 억지로 배치하는 대신 장비 정보가 양식 아래로 이동합니다. 라이브러리 예시에서는 ids-layout-grid와 중단점별 열 속성을 사용합니다. 이 예시에서는 의도적으로 더 단순한 반응형 레이아웃을 사용하며, 최대 너비와 중단점은 애플리케이션 값입니다. 여기서 보여주는 요소는 토큰 기반 간격과 네이티브 컨트롤 레이블입니다. 지원 사양 읽기 ## Infor 디자인 시스템 네이티브 패키지를 고정하고 값을 읽기 전에 초기화합니다 ### 공개된 패키지를 신뢰할 수 있는 진입점으로 사용합니다 확인된 패키지의 버전은 1.17.1이며, ES 모듈 진입점은 enterprise-wc.js이고 현재 소스 저장소는 Infor에서 호스팅합니다. 따라서 이전 GitHub 위치는 신뢰할 수 있는 설치 안내가 아닙니다. 코드는 공개 패키지를 가져와 컴포지션을 삽입한 뒤, 동작을 연결하기 전에 커스텀 요소가 정의될 때까지 기다립니다. 공식 라이브 예시에는 빌드에 따라 달라지는 청크 URL이 포함되어 있습니다. 임의의 청크 이름을 애플리케이션에 복사하면 배포 산출물에 종속될 수 있습니다. 패키지 진입점을 사용하면 번들러가 해당 종속성을 확인합니다. 이 가이드에서는 공개 메서드 선언을 확인하고, 브라우저 예시와 네이티브 빌드에 관한 주장을 명확히 구분합니다. 1. Vite vanilla 스캐폴드에 고정된 패키지를 설치하고, 애플리케이션의 에셋 정책에 따라 문서화된 글꼴을 포함합니다. 2. 제공된 진입점을 사용하고 CSS, 커스텀 요소가 정의될 때까지 기다린 다음 기본 동작과 초기화 동작을 연결합니다. 3. 요약이 비어 있는 경우, 형식이 잘못된 이메일, 유효한 로컬 초안, 이후 편집을 테스트하고 표시된 스냅샷이 오래된 상태로 남지 않는지 확인합니다. 지원 사양 읽기 ## Infor 디자인 시스템 컴포넌트 예시 ### 완전한 독립형 인터랙티브 예제 문서 전체를 index.html로 저장한 다음 브라우저에서 여세요. 검증된 IDS 코어/라이트 토큰 값과 시스템 글꼴 대체 설정을 사용한 독립적인 HTML/CSS 해석입니다. 네이티브 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.

``` 코드 참조 - 에셋 02006은 문자열로 유지됩니다. 커스텀 요소 등록과 checkValidation()을 실행하는 것은 이 HTML 양식이 아니라 네이티브 IDS 예시입니다. 어느 쪽도 유지보수 작업 지시를 생성하지 않습니다. ### 읽기 전용 식별자, 필수 요약 및 연락처 유효성 검사 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를 반환하므로 Boolean 결과로 취급하지 않습니다.

- 에셋 02006은 텍스트이므로 앞자리의 0이 유지됩니다.

- 미리보기 준비는 로컬 페이지 상태만 변경합니다.

### 동작 모양을 명시적으로 지정합니다

기본 및 보조 컴포넌트 변형을 사용하면 워크플로의 주요 동작을 분명히 보여줄 수 있습니다.

```
Prepare local draft
Clear draft
```

코드 참조

- 사용할 수 없는 컴포넌트는 흐리게 표시하는 것만으로 표현하지 말고 disabled를 적용합니다.

## Infor 디자인 시스템 에이전트 설정

### 구현 시작점

#app을 사용하는 Vite vanilla 스캐폴드용 전체 진입점과 스타일시트입니다. 패키지 버전과 메서드는 공개 패키지에서 확인했으며, 여기서는 컴파일을 실행하지 않았습니다. 승인된 글꼴 제공처에서 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()이 Boolean을 반환한다고 간주하지 마세요.
```

## 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)