Alaska Airlines Auro 디자인 시스템: 페이지를 구성하기 전에 Alaska를 명시적으로 선택하세요
현재 테마와 마이그레이션 테마는 서로 바꿔 사용할 수 없습니다
Auro는 Alaska, Hawaiian, Atmos를 서로 구분되는 테마로 지원합니다. Alaska Classic은 마이그레이션을 위해 이전 시각적 값을 새로운 이름 뒤에 유지하며, Auro Classic은 더 이상 사용되지 않습니다. 제공된 항목은 Alaska CSS 파일을 가져오고 aag-theme-as 속성을 적용합니다.
중첩된 data-aag-theme 값으로 하위 섹션의 테마를 변경할 수 있습니다. 이 기능은 여러 서비스를 공유하는 플랫폼에 유용하지만, Alaska 색상의 화면에서 Hawaiian 타이포그래피나 기존 값을 아무 설명 없이 가져다 써도 된다는 뜻은 아닙니다. 예시는 전체에 일관된 하나의 테마를 사용합니다.
Alaska Airlines Auro 디자인 시스템: 지원되는 타이포그래피 클래스를 적용하세요
네 가지 그룹으로 용도를 구분합니다
Auro의 현재 타이포그래피 가이드는 스타일을 본문, 제목, 디스플레이, 강조의 네 그룹으로 나눕니다. 제목은 문서 구조상 제목에 사용하고, 디스플레이는 문서 계층 구조상 제목은 아니지만 시각적으로 두드러져야 하는 텍스트에 사용합니다. 이 가이드는 요소마다 글꼴 규칙을 다시 정의하기보다 body-default, body-lg 같은 클래스를 사용할 것을 권장합니다.
Alaska 소스에서는 본문과 제목에 AS Circular, 강조 텍스트에 Good OT를 지정합니다. 굵기와 행간 역할도 별도로 제공합니다. 오프라인 미리보기는 해당 서체를 로컬에서 사용할 수 있는 것처럼 가장하지 않고 문서화된 대체 서체군을 사용합니다.
Alaska Airlines Auro 디자인 시스템: 항공편 컴포넌트는 구조화된 여정을 나타냅니다
오프셋 정보를 유지한 채 시간 정보를 전달하세요
auro-flight는 auro-flightline과 함께 출발, 도착, 구간 정보를 표시합니다. 기본 예제는 항공편 라벨 배열, 분 단위 운항 시간, 두 개의 역 코드, 두 개의 ISO 날짜·시간 값을 받습니다. 제공된 코드는 모호한 현지 시각 문자열을 전달하는 대신 명시적인 오프셋을 유지합니다.
원본 샘플 레코드 두 개는 출발 및 도착 시간대가 같으므로, 150분의 운항 시간은 표시된 시간과 일치합니다. 실제 운항편이 아닙니다. 실제 연결 여정을 표시하려면 문서에 설명된 구간 표현도 필요합니다. 단순한 라벨 목록만으로 검증된 연결 여정이라고 표시해서는 안 됩니다.
Alaska Airlines Auro 디자인 시스템 컴포넌트 코드와 함께 타이포그래피 기반 스타일 불러오기
토큰, WCSS, 요소는 서로 다른 문제를 해결합니다
디자인 토큰은 값을 제공합니다. Web Core Style Sheets는 기반 스타일과 타이포그래피 클래스를 제공합니다. 항공편 패키지는 사용자 정의 요소를 등록합니다. 이 중 하나만 설치하는 것으로 브랜드가 적용된 전체 페이지를 구성할 수는 없습니다.
WCSS는 모든 스타일을 담은 단일 소스 파일이 아니라 필요한 항목을 선택해 사용할 수 있는 기반입니다. v12 Sass 경로에서는 @import가 @use 및 @forward로 변경되었습니다. 이 예제는 이전 Sass 지침과 현재 패키지 구조를 혼용하지 않고, 문서에 안내된 사전 빌드 Alaska 스타일시트를 사용합니다.
필터에는 화면에 표시되는 레이블이 있고, 각 선택 동작에는 결과를 나타내는 이름이 지정되어 있습니다. 상태 영역은 선택한 샘플을 텍스트로 알립니다. 장식용 선이나 풍경이 없어도 출발과 도착 정보를 이해할 수 있습니다.
여행자 정보를 입력받는 확장 기능을 만들 때 Auro Input은 label 및 helpText 슬롯을 지원하고, 기본적으로 포커스를 잃을 때 유효성을 검사합니다. validateOnInput 또는 noValidate로 검사 시점을 변경할 수도 있습니다. 값을 지우면 value가 undefined로 초기화됩니다. 모든 폼 컴포넌트가 동일한 빈 값을 반환한다고 가정하지 말고 이러한 계약을 준수해야 합니다.
Alaska Airlines Auro 디자인 시스템 여러 버전이 실제로 공존할 때만 대체 이름 등록
컴포넌트 클래스와 전역 등록을 분리합니다
항공편 패키지를 표준 방식으로 가져오면 auro-flight가 자동 등록됩니다. /class 진입점에서는 AuroFlight를 제공하며, 여러 버전을 같은 문서에서 서로 다른 사용자 정의 요소 이름으로 사용해야 할 때 명시적으로 register(name)을 호출할 수 있습니다. 사용자 정의 이름에는 하이픈이 포함되어야 합니다.
이 기능은 충돌 관리를 위한 것으로, 한 가지 버전만 사용하는 일반적인 페이지에는 필요하지 않습니다. 간단한 예제에서는 기본 이름을 사용하고, 잠금 파일로 의존성 버전을 고정하며, 주요 버전으로 교체하기 전에 마이그레이션을 검토하세요. 원본 미리보기의 간격과 모서리 반경은 애플리케이션에서 결정할 사항입니다. 이 페이지에서는 이를 검증된 Auro 기본 요소라고 부르지 않습니다.
시간대를 변경하면 이전에 선택한 레코드를 초기화해, 숨겨진 선택 항목으로 혼동을 주지 않도록 합니다.
예제에 표시된 항공편 번호, 날짜, 시간은 모두 허구입니다.
04
Alaska Airlines Auro 디자인 시스템 AI 에이전트 설정
구현 시작점
기존 Vite vanilla 프로젝트를 위한 애플리케이션 진입점과 CSS를 완성하세요. 설치된 버전은 프로젝트 잠금 파일에 기록하세요. 여기서는 네이티브 컴포넌트 컴파일을 검증하지 않았습니다. 삽입된 예제는 별도의 오프라인 HTML을 사용하며 AS Circular 또는 Good OT를 포함하지 않습니다.
자바스크립트
// src/main.js in a Vite vanilla project
// npm install @aurodesignsystem/auro-flight @aurodesignsystem/design-tokens @aurodesignsystem/webcorestylesheets
import '@aurodesignsystem/design-tokens/dist/themes/alaska/CSSCustomProperties--alaska.css';
import '@aurodesignsystem/webcorestylesheets/dist/bundled/themes/alaska.global.min.css';
import '@aurodesignsystem/auro-flight';
import './style.css';
document.documentElement.setAttribute('data-aag-theme','aag-theme-as');
const flights=[
{id:'sample-am',label:'Morning sample',number:'DEMO 01',departure:'2030-06-15T08:00:00-07:00',arrival:'2030-06-15T10:30:00-07:00',period:'morning'},
{id:'sample-pm',label:'Evening sample',number:'DEMO 02',departure:'2030-06-15T17:00:00-07:00',arrival:'2030-06-15T19:30:00-07:00',period:'evening'}
];
let selected='';
document.querySelector('#app').innerHTML=`<main><h1>Explore sample flights</h1>
<p class="body-default">Original records, not a live schedule or booking service.</p>
<label for="period">Departure period</label><select id="period"><option value="all">All times</option><option value="morning">Morning</option><option value="evening">Evening</option></select>
<div id="results"></div><p id="selection" role="status"></p></main>`;
function render(){const period=document.querySelector('#period').value;const target=document.querySelector('#results');target.replaceChildren();
flights.filter(f=>period==='all'||f.period===period).forEach(f=>{
const article=document.createElement('article'), title=document.createElement('h2');title.textContent=f.label;
const component=document.createElement('auro-flight');component.setAttribute('flights',JSON.stringify([f.number]));component.setAttribute('duration','150');component.setAttribute('departureTime',f.departure);component.setAttribute('arrivalTime',f.arrival);component.setAttribute('departureStation','SEA');component.setAttribute('arrivalStation','LAX');component.append(document.createElement('auro-flightline'));
const button=document.createElement('button');button.type='button';button.textContent=selected===f.id?'Selected sample':'Select this sample';button.setAttribute('aria-pressed',String(selected===f.id));button.onclick=()=>{selected=f.id;document.querySelector('#selection').textContent=f.label+' selected for this page only. No booking made.';render();};
article.append(title,component,button);target.append(article);
});
}
document.querySelector('#period').onchange=()=>{selected='';document.querySelector('#selection').textContent='';render();};render();
/* src/style.css — application layout, not official size tokens */
main{max-width:64rem;margin:auto;padding:24px}
article{padding:24px;margin-block:16px;border:1px solid var(--ds-basic-color-border-subtle);border-radius:12px}
button{font:inherit;background:var(--ds-advanced-color-button-primary-background);color:var(--ds-advanced-color-button-primary-text);padding:12px 24px;border:0;border-radius:8px;margin-top:16px}
button:hover{background:var(--ds-advanced-color-button-primary-background-hover)}
button:focus-visible,select:focus-visible{outline:3px solid var(--ds-advanced-color-state-focused);outline-offset:4px}
select{font:inherit;padding:12px;margin:8px 0 16px}
프로젝트를 위한 프롬프트
에이전트 프롬프트
명시적인 aag-theme-as, Alaska 디자인 토큰 CSS, WCSS 타이포그래피, 네이티브 auro-flight 필드를 사용해 Auro Alaska 항공편 목록을 구성하세요. ISO 오프셋과 운항 시간이 일치하도록 하세요. 컴포넌트 이벤트를 임의로 만들지 말고 애플리케이션에서 필터링과 선택을 관리하며, 숨겨진 선택 항목을 초기화하고 각 레코드에 샘플 데이터임을 표시하세요.
05
Alaska Airlines Auro 디자인 시스템 출처 및 범위
독립적으로 만든 OpenDesign입니다. 항공편 번호, 날짜, 시간은 모두 허구이며 실제 항공사 운항 일정, 요금, 운항 가능 여부 또는 예약을 나타내지 않습니다. 애플리케이션 간격을 공식 토큰 척도라고 주장하지 않습니다.
