# Ontario 디자인 시스템 ## Ontario 디자인 시스템 인터페이스 미리보기 모든 단계를 열고 접은 다음, 지원 섹션으로 바로 이동해 보세요. ## Ontario 디자인 시스템 디자인 참조 Ontario 디자인 토큰과 complete-styles 9.1.0을 사용합니다. 실제 패키지 내보내기 경로, 아코디언 SCSS 및 공개된 스크립트를 로컬에서 확인했습니다. ### 텍스트, 표면 및 상호작용 색상 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ontario-colour-greyscale-white | #FFFFFF | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-greyscale-black | #1A1A1A | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-greyscale-greyscale5 | #F2F2F2 | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-greyscale-greyscale20 | #CCCCCC | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-link | #0066CC | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-link-hover | #00478F | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-link-active | #002142 | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-link-visited | #551A8B | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-focus | #009ADB | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-alert | #CD0000 | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-success | #118847 | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | | --ontario-colour-system-information | #1080A6 | 실제 9.1.0 토큰 내보내기입니다. 컴파일된 컴포넌트 CSS은 이러한 역할을 실제 값에 연결합니다. 토큰만 가져와서는 컴포넌트가 생성되지 않습니다. | ### 간격 스케일 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ontario-spacing-0 | 0 | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-1 | 0.25rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-2 | 0.5rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-3 | 0.75rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-4 | 1rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-5 | 1.5rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-6 | 2rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-7 | 2.5rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-8 | 3rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-9 | 4rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | | --ontario-spacing-10 | 5rem | 공개된 간격 값은 rem 단위입니다. spacing-5는 1.5rem이므로 접미사는 픽셀 값을 직접 나타내지 않습니다. | ### 타이포그래피 및 그리드 참조 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ontario-font-sizes-small | 0.875rem | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-font-sizes-standard-body-text | 1rem | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-font-sizes-large | 1.25rem | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-font-sizes-x-large | 1.5rem | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-breakpoints-small | 40em | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-breakpoints-medium | 73em | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-grid-columns-total-columns | 12 | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-grid-columns-row-width | 1152 | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | | --ontario-grid-columns-column-gutter | 32 | 공개된 토큰 값입니다. 단위가 없는 그리드 값은 원본 시스템을 설명하므로 관련 그리드 구현에 맞게 해석해야 합니다. | ## Ontario 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Ontario 디자인 시스템 패키지 내보내기 및 컴포넌트 스타일 ### 전체 스타일 패키지를 목적에 맞게 사용하세요 > 이 예제는 @ongov/ontario-design-system-complete-styles 9.1.0을 고정하고 공개된 확장/축소 스크립트를 사용합니다. 이는 별도의 Ontario 웹 컴포넌트 런타임이 아니라 HTML/CSS 구현입니다. 패키지의 내보내기 맵은 컴파일된 테마를 styles/css/compiled/ontario-theme.min.css에서 제공합니다. 경로 중간에 dist를 더한 잘못된 심층 가져오기는 최신 번들러에서 실패합니다. ### 아코디언 규칙 포함 검토한 9.1.0 패키지에서는 컴파일된 테마에 이 예제에서 사용하는 아코디언 선택자가 포함되어 있지 않습니다. 따라서 페이지에는 제공된 CSS에 패키지 자체의 ontario-accordion.scss에서 컴파일한 규칙을 포함합니다. 해당 심층 JavaScript 경로는 내보내기 대상이 아니므로, 공개된 dist/scripts 디렉터리의 스크립트를 복사합니다. 이는 선택적인 시각적 다듬기가 아니라 빌드에 필요한 구체적인 요구 사항입니다. ## Ontario 디자인 시스템 Ontario 타이포그래피 및 계층 구조 ### 의도된 글꼴 조합 유지 공개된 테마는 제목에 Raleway Modified를, 일반 텍스트에 Open Sans를 사용합니다. 미리보기에는 페이지에서 사용하는 일반 두께 400 및 700 글꼴 파일이 포함되어 있습니다. 따라서 외부 글꼴에 의존하지 않으면서도 특징적인 제목 글자 형태를 유지할 수 있습니다. 글꼴이 로드된 후 타이포그래피를 검토하세요. 대체 글꼴로 표시하면 줄바꿈과 아코디언 제목의 상대적인 굵기가 달라질 수 있습니다. ### 단계를 한눈에 파악하기 쉽게 구성하세요 제목은 하나의 작업을 소개하고, 도입부는 가이드 사용 방법을 설명하며, 세 개의 단계 제목은 명확한 순서를 제시합니다. 각 패널에는 보충 문단과 목록이 들어갑니다. 필수 참여 및 접근 정보는 숨겨진 패널을 찾아야만 볼 수 있게 해서는 안 되므로, 옆에 있는 안내는 계속 표시합니다. 계층 구조는 콘텐츠 모델의 일부이지, 모든 문장을 제목으로 만들 이유가 아닙니다. ## Ontario 디자인 시스템 색상 역할과 컴포넌트의 기능적 시각 단서 ### 링크와 포커스에 서로 다른 역할 부여 내보낸 링크 색상은 #0066CC이며, 호버·활성·방문 상태에는 각각 별도의 색상이 사용됩니다. 포커스 색상은 #009ADB입니다. 아코디언에는 표시되는 라벨, 방향 아이콘, 확장 상태가 함께 있으며, 파란색 글자만으로 동작을 설명하지 않습니다. 회색 경계선은 모든 문단을 개별 카드로 만들지 않으면서 단계를 구분합니다. ### 게시된 간격 단계를 사용합니다 간격 표는 0부터 5rem까지 이름이 지정된 중간 단계와 함께 제시합니다. 예시에는 공식 컴포넌트 규칙을 중심으로 직접 작성한 2열 레이아웃을 적용했습니다. 760px에서의 레이아웃 전환은 이 가이드에 포함된 구성상의 결정이며, 새로운 Ontario 중단점으로 안내하지 않습니다. 공식 중단점은 참고 표에 별도로 기록되어 있습니다. ## Ontario 디자인 시스템 아코디언 구조와 상태 ### 각 버튼을 해당 콘텐츠에 연결합니다 각 단계에는 실제 버튼이 포함된 제목이 있습니다. 버튼의 aria-controls는 고유 ID가 지정된 콘텐츠 섹션 하나를 가리키며, aria-expanded는 해당 섹션의 열림 여부를 나타냅니다. 콘텐츠에서는 aria-labelledby를 사용해 버튼을 참조합니다. 기본 스크립트는 패널을 열고 닫을 때 컴포넌트 클래스와 aria-hidden을 함께 처리합니다. 중복 ID가 있으면 시각적 레이아웃이 올바르게 보여도 이 연결이 깨집니다. - 버튼 ID와 콘텐츠 ID는 고유하게 지정합니다. - 실제 인터랙티브 버튼을 제목으로 감쌉니다. - 마크업을 버전이 지정된 스크립트의 표시 동작에 맞춥니다. ### 전체 단계 제어 상태를 동기화합니다 모두 펼치기와 모두 접기는 세 개의 단계 패널을 함께 제어합니다. 각 패널은 개별적으로도 조작할 수 있습니다. 이 예시는 고정된 스크립트가 지원하는 마크업을 따르며, 스크립트가 제거하지 않는 hidden-until-found 동작과 같은 최신 웹사이트 마크업을 섞어 사용하지 않습니다. 문서 페이지는 설치된 릴리스와 별개로 발전할 수 있지만, 실행 가능한 예제는 실제 패키지와 일치해야 합니다. ## Ontario 디자인 시스템 연결된 도입부와 필수 콘텐츠 ### 실제 버튼을 통해 단계를 엽니다 사이드바 링크는 단계를 가리킨 다음, 해당 단계가 닫혀 있으면 기본 버튼을 호출합니다. 단계가 열린 뒤에는 버튼에 포커스를 둡니다. 이렇게 하면 버튼의 expanded 속성, 제목 클래스, 콘텐츠 표시 상태가 하나의 전환 과정에서 함께 바뀝니다. 추가 핸들러는 애플리케이션 코드이며, 동작을 재현할 수 있도록 전체 코드를 제공합니다. ### 펼쳐 볼 가치가 있는 보충 정보를 작성합니다 직접 작성한 세 단계에는 소규모 워크숍을 위한 준비, 준비물, 후속 조치가 담겨 있습니다. 각 단계에는 구체적인 작업과 예시의 범위를 설명하는 문단이 포함됩니다. 실제 초대장이라면 목적, 접근 관련 안내, 참여 방법을 계속 표시해야 합니다. 이 패턴은 긴 가이드를 구성하기 위한 것이며, 페이지를 짧아 보이게 하려고 필수 정보를 숨겨서는 안 됩니다. ## Ontario 디자인 시스템 전체 소스 코드와 검증 ### 버전이 지정된 예제를 다시 만듭니다 Vite vanilla 프로젝트를 만들고 고정된 complete-styles 패키지를 설치한 다음, 확장/축소 스크립트를 src에 복사합니다. 루트 마운트 요소를 유지하면서 제공된 main.js와 ontario.css를 저장합니다. CSS에는 이번 릴리스용으로 컴파일된 공식 아코디언 규칙과, 명확하게 구분해 표시한 직접 작성 레이아웃 규칙이 포함됩니다. 이 HTML 구현에는 컴포넌트 등록이나 백엔드 서비스가 필요하지 않습니다. 1. 고정된 complete-styles 패키지를 설치합니다. 2. 확장/축소 스크립트를 복사하고 전체 진입 파일과 CSS를 저장합니다. 3. 모든 패널을 연 다음, 링크를 통해 단계를 접었다가 다시 엽니다. 4. 키보드 포커스, expanded 속성, 모바일 레이아웃을 확인합니다. ### 링크와 그룹 동작을 점검합니다 모든 단계를 열고, 모두 접기를 실행한 다음, 사이드바 링크를 사용해 가운데 단계를 다시 엽니다. 버튼의 expanded 상태와 콘텐츠 표시 여부가 일치하는지 확인합니다. 사이드바가 가이드 아래에 배치되는 모바일 너비에서도 반복합니다. 로컬 점검에서는 글꼴 파일이 로드되는지, 페이지에 가로 넘침이 없는지, 기본 스크립트에서 브라우저 오류가 발생하지 않는지도 확인합니다. ## Ontario 디자인 시스템 컴포넌트 예제 ### main.js — 워크숍 가이드 전체 코드 직접 작성한 전체 콘텐츠, 게시된 스크립트 가져오기, 링크를 통한 열기 동작. ``` import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css'; import './ontario-expand-collapse.js'; import './ontario.css'; const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']]; const icon=(dir)=>``; document.getElementById('root').innerHTML=`

ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Run an inclusive workshop

Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.

Workshop stages

${topics.map(([title,intro,items,note],i)=>`

`).join('')}
`; // Drive linked opening through the native button so its ARIA state stays synchronized. document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()})); ``` 코드 참조 - setup 명령으로 게시된 스크립트를 복사합니다. 링크는 기본 버튼을 호출해 ARIA 상태를 동기화합니다. ### ontario.css — 컴파일된 아코디언과 직접 작성한 레이아웃 공식 9.1.0 아코디언 규칙에 직접 작성한 반응형 구성을 추가했습니다. ``` /* Accordion rules compiled from Ontario 9.1.0 published SCSS. */ .ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0} /* Original composition. */ main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}} ``` 코드 참조 - 이 고정 릴리스에는 컴파일된 테마와 컴포넌트 전용 아코디언 스타일시트가 모두 필요합니다. ## Ontario 디자인 시스템 에이전트 설정 ### 구현 시작점 미리보기에서는 로컬 글꼴 파일과 함께 게시된 아코디언 스크립트를 사용합니다. 별도의 웹 컴포넌트 라이브러리는 불러오지 않습니다. ``` npm create vite@latest ontario-guide -- --template vanilla cd ontario-guide npm install npm install @ongov/ontario-design-system-complete-styles@9.1.0 cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js # Replace src/main.js and add src/ontario.css. Keep
. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` complete-styles 9.1.0과 여기에 맞는 아코디언 스크립트로 Ontario 워크숍 가이드를 만듭니다. 컴포넌트 전용 아코디언 CSS, 실제 Raleway Modified/Open Sans 글꼴, 접근 가능한 버튼-콘텐츠 ID, 동기화된 펼치기/접기 동작을 포함합니다. 필수 정보는 계속 표시하고, 단계 링크는 기본 버튼을 통해 연결합니다. ``` ## Ontario 디자인 시스템 출처와 범위 Ontario 9.1.0 스타일과 게시된 확장/축소 스크립트를 사용해 OpenDesign에서 작성한 워크숍 가이드입니다. 콘텐츠와 페이지 구성은 직접 작성했으며, 공식 서비스 페이지가 아닙니다. - 아코디언 안내 콘텐츠, 마크업, 펼치기 모델. - 패키지 설정 패키지 역할과 통합 방식. - 색상 시스템 인터랙션 색상과 의미 색상. - 버전이 지정된 공개 소스 게시된 스타일, 토큰 내보내기, 아코디언 구현. ## Ontario 디자인 시스템 관련 리소스 ### Poncho 실행 가능한 활동 디렉터리에서 Poncho의 Bootstrap 3 그리드, 의미에 맞는 액션 색상, 전체 영역을 클릭할 수 있는 서비스 패널을 살펴보세요. ### Queensland Government 디자인 시스템 실제 테마 역할, 네이티브 체크박스 스타일 및 접근성 높은 검토 대화상자를 갖춘 완전한 일러스트 리소스 선택기를 통해 Queensland의 Bootstrap 구현을 살펴보세요. ### Ripple 완성된 워크숍 타임라인에서 Ripple의 실제 색상 역할, 14단계 간격 척도, 반응형 타이포그래피 참고 자료를 살펴보세요. 점진적 표시, 진행 상황, 다음 단계의 키보드 포커스를 제공합니다. - [구현 레퍼런스](https://designsystem.ontario.ca/components/detail/accordions.html) - [출처](https://github.com/ongov/ontario-design-system) - [코드 참조](https://designsystem.ontario.ca/components/detail/accordions.html) - [코드 참조](https://github.com/ongov/ontario-design-system) - [아코디언 안내 콘텐츠, 마크업, 펼치기 모델.](https://designsystem.ontario.ca/components/detail/accordions.html) - [패키지 설정 패키지 역할과 통합 방식.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html) - [색상 시스템 인터랙션 색상과 의미 색상.](https://designsystem.ontario.ca/components/detail/colours.html) - [버전이 지정된 공개 소스 게시된 스타일, 토큰 내보내기, 아코디언 구현.](https://github.com/ongov/ontario-design-system)