Изучите тему Alaska от Auro на примере реальных семантических цветовых и типографических токенов, типографики на основе классов и встроенного компонента рейса. Две исходные записи о рейсах демонстрируют локальную фильтрацию и выбор, не изображая инвентарь авиакомпании или бронирование.
Исходная автономная интерпретация ролей темы Alaska HTML и иерархии информации о рейсах. Без среды выполнения Auro, фирменных шрифтов, актуальных данных о наличии мест и бронирования. · Справочник по реализации
02
Alaska Airlines Auro Справочник по дизайн-системе
Текущий общедоступный файл темы Alaska CSS и документация компонентов Auro. Интервалы и скругления в исходном примере явно указаны как решения приложения, поскольку полная актуальная шкала базовых значений не подтверждена. Устаревшие значения Auro Classic не смешиваются со справочником Alaska.
Дизайн-система 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. Акцент бренда и текст для чтения выполняют разные задачи
Используйте семантическую роль цвета переднего плана
В текущем исходном коде токенов Alaska для текста по умолчанию используется #2a2a2a, для приглушённого текста — #676767. Основная роль бренда задана цветом #01426a, а более выразительный вариант — #00274a. Это разные назначения, даже если заголовок и кнопка расположены в одной области.
В примере для фактов о рейсах используется тёмный нейтральный текст, а синий цвет подчёркивает интерактивные элементы. Мятные и голубые акценты показаны в исходной иллюстрации пейзажа, а не используются как недокументированные сигналы состояния. Выбранный рейс выделен текстом и состоянием кнопки, а также границей.
В актуальном руководстве Auro типографические стили разделены на четыре группы: основной текст, заголовки, крупный текст и акцентный текст. Стили заголовков предназначены для семантических заголовков, а крупный текст — для визуально заметных фрагментов, которые не являются заголовками в иерархии документа. В руководстве рекомендуется применять классы вроде body-default и body-lg, а не заново задавать все правила шрифтов для каждого элемента.
В исходном коде Alaska для основного текста и заголовков указан шрифт AS Circular, а для акцентного текста — Good OT. Также предусмотрены отдельные роли насыщенности и межстрочного интервала. В автономном предварительном просмотре используется документированное резервное семейство шрифтов, а не создаётся видимость, будто фирменные шрифты доступны локально.
Дизайн-система Alaska Airlines Auro. Компонент flight представляет структурированный маршрут
Передавайте сведения о времени, сохраняя смещение часового пояса
auro-flight объединяет сведения об отправлении, прибытии и участке маршрута с auro-flightline. В базовом примере используются массив названий рейсов, длительность в минутах, два кода станций и две даты и времени в формате ISO. В предоставленном коде явно заданные смещения часовых поясов сохраняются: вместо них не передаются неоднозначные значения местного времени.
В двух исходных примерах совпадают часовые пояса отправления и прибытия, поэтому длительность 150 минут соответствует указанному времени. Это не реальные рейсы. Для маршрута с пересадками в производственной среде также требуется документированное представление участков маршрута; плоский список названий сам по себе не должен создавать впечатление, что пересадка подтверждена.
Дизайн-система Alaska Airlines Auro. Не храните выбор приложения в данных отображения
Отображаемый вариант и выбранный вариант — разные состояния
В нативном примере каждый вариант отображается компонентом auro-flight, а для локального выбора используется обычная кнопка. Так не приходится выдумывать API выбора для компонента отображения. Идентификатор выбранного варианта хранится в приложении и отражается атрибутом aria-pressed.
При изменении фильтра по времени отправления выбор и сообщение сбрасываются. Иначе интерфейс мог бы сообщить, что по-прежнему выбран скрытый вариант. В предварительном просмотре явно указано: пример выбран только для этой страницы, бронирование не выполнялось.
Отфильтруйте исходные записи по времени отправления.
Отобразите остальные сведения о рейсе без изменения их значений.
Выберите отображаемый пример по его постоянному идентификатору.
Дизайн-система Alaska Airlines Auro. Подключайте типографические основы вместе с кодом компонентов
Токены, WCSS и элементы решают разные задачи
Токены дизайн-системы задают значения. Web Core Style Sheets предоставляют базовые стили и классы типографики. Пакет flight регистрирует пользовательский элемент. Установка только одной из этих составляющих не равнозначна созданию полностью оформленной страницы в фирменном стиле.
WCSS — это набор выбираемых по отдельности базовых стилей, а не единый файл со всеми возможными стилями. В версии v12 Sass перешёл с @import на @use и @forward. В примере используется документированная готовая таблица стилей Alaska, а устаревшие инструкции Sass не смешиваются с актуальной структурой пакетов.
Дизайн-система Alaska Airlines Auro Используйте реальные подписи элементов управления и состояния
Не полагайтесь только на цвет при отображении результата
У фильтра есть видимая подпись, а в каждом действии по выбору обозначен его результат. Область состояния сообщает текстом, какой пример выбран. Отправление и прибытие остаются понятными и без декоративной линии или пейзажа.
Для расширения, собирающего данные о путешественниках, в Auro Input предусмотрены слоты label и helpText. По умолчанию компонент проверяет данные при потере фокуса; этот момент можно изменить с помощью validateOnInput или noValidate. Сброс очищает значение до undefined. Следует соблюдать эти соглашения, а не полагать, что любой компонент формы возвращает одинаковое пустое значение.
Представляйте время и сведения о станции читаемым текстом.
Добавьте фильтру отдельную подпись, не связанную с количеством результатов.
Используйте область состояния для сообщения о реальном локальном выборе.
Не показывайте индикатор ожидания для мгновенного обновления состояния.
Дизайн-система Alaska Airlines Auro. Регистрируйте альтернативные имена, только если версии действительно существуют одновременно
Отделяйте класс компонента от глобальной регистрации
Стандартный импорт пакета рейсов автоматически регистрирует auro-flight. Его точка входа /class предоставляет AuroFlight для явных вызовов register(name), когда нескольким версиям нужны разные имена пользовательских элементов в одном документе. Пользовательское имя должно содержать дефис.
Это средство управления конфликтами, а не требование для обычной страницы с одной версией. В простом примере используйте имя по умолчанию, фиксируйте зависимости в файле блокировки и проверяйте миграции перед переходом на следующую мажорную версию. Исходные отступы и радиусы в предварительном просмотре остаются решениями приложения; эта страница не объявляет их подтверждёнными примитивами Auro.
Сохраните весь документ как index.html и откройте его в браузере. Независимая офлайн-интерпретация ролей темы Alaska и иерархии информации о рейсах в HTML. Без собственной среды выполнения Auro, фирменных шрифтов, актуальных данных о наличии мест и бронирования.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Original flight choices</title><style>*{box-sizing:border-box}body{margin:0;color:#2a2a2a;background:#fff;font:16px/1.625 system-ui,-apple-system,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #01426a;outline-offset:4px}header{padding:20px 32px;display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid #ddd}header b{color:#01426a;letter-spacing:2px;font-size:14px}header small{color:#676767}.hero{background:#ebf3f9;position:relative;overflow:hidden}.hero-inner{max-width:1100px;margin:auto;padding:36px 32px 48px;position:relative;z-index:1}.hero h1{font-size:42px;line-height:1.3;font-weight:300;margin:0 0 12px}.hero p{max-width:480px;margin:0;color:#676767}.mountain{position:absolute;right:-20px;bottom:-25px;width:43%;height:180px;background:#cfe0ef;clip-path:polygon(0 100%,35% 10%,55% 55%,75% 0,100% 100%)}.mountain:after{content:'';position:absolute;inset:50px -15px 0 45px;background:#a3cd6a;clip-path:polygon(0 100%,45% 10%,100% 100%)}main{max-width:1100px;margin:auto;padding:32px}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.toolbar label{display:block;font-size:14px;margin-bottom:8px}select{padding:10px 40px 10px 12px;border:1px solid #959595;border-radius:8px;background:#fff;color:#2a2a2a}#count{font-size:14px;color:#676767;margin:0}.flight{border:1px solid #ddd;border-radius:12px;padding:24px;margin-bottom:16px}.flight.selected{border:2px solid #01426a;padding:23px;background:#f7fbfd}.flight-head{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:#676767;margin-bottom:24px}.sample-tag{background:#ebf3f9;color:#01426a;padding:0 8px;border-radius:4px}.flight-body{display:grid;grid-template-columns:1fr 160px 1fr auto;gap:24px;align-items:center}.station b{display:block;font-size:28px;line-height:1.3;font-weight:400}.station span{display:block;font-size:14px;color:#676767}.line{text-align:center;color:#676767;font-size:12px}.line i{display:block;height:1px;background:#00274a;position:relative;margin:12px 0}.line i:before,.line i:after{content:'';width:7px;height:7px;background:#fff;border:1px solid #00274a;border-radius:50%;position:absolute;top:-3px;left:0}.line i:after{left:auto;right:0}.flight button{border:0;border-radius:8px;background:#01426a;color:#fff;padding:12px 20px;white-space:nowrap}.flight button:hover{background:#00274a}.selected button{background:#fff;border:1px solid #01426a;color:#01426a}.summary{background:#ebf3f9;border-left:4px solid #01426a;padding:16px 24px;margin-top:24px}.summary:empty{display:none}footer{font-size:12px;line-height:1.5;color:#676767;margin-top:24px}@media(max-width:700px){header{padding:16px;gap:16px}header small{max-width:140px}.hero-inner{padding:28px 16px 40px}.hero h1{font-size:32px}.hero p{max-width:80%}.mountain{opacity:.45;width:70%}main{padding:24px 16px}.toolbar{gap:16px}.flight{padding:20px}.flight.selected{padding:19px}.flight-body{grid-template-columns:1fr 80px 1fr;gap:12px}.flight button{grid-column:1/-1;width:100%;margin-top:8px}.station b{font-size:22px}.flight-head{font-size:12px}.station span{font-size:12px}select{max-width:185px;padding-right:24px}}
</style><header><b>JOURNEY EXPLORER</b><small>Independent Auro interpretation</small></header><div class="hero"><div class="mountain" aria-hidden="true"></div><div class="hero-inner"><h1>A little closer to your next adventure.</h1><p>Explore two original flight examples and keep a choice for this page session.</p></div></div><main><div class="toolbar"><div><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><p id="count" aria-live="polite"></p></div><section id="results" aria-label="Sample flights"></section><p id="selection" class="summary" role="status"></p><footer>Fictional flights for interface exploration. No real schedule, fare, seat availability or booking. Times use the same sample UTC−07:00 offset. Original landscape artwork.</footer></main><script>const data=[{id:'am',name:'Morning sample',number:'DEMO 01',dep:'08:00',arr:'10:30',period:'morning'},{id:'pm',name:'Evening sample',number:'DEMO 02',dep:'17:00',arr:'19:30',period:'evening'}];let selected='';function render(){const period=document.querySelector('#period').value,visible=data.filter(x=>period==='all'||x.period===period);document.querySelector('#count').textContent=`${visible.length} sample ${visible.length===1?'flight':'flights'}`;document.querySelector('#results').innerHTML=visible.map(x=>`<article class="flight ${selected===x.id?'selected':''}"><div class="flight-head"><span>${x.name} · ${x.number}</span><span class="sample-tag">Original sample</span></div><div class="flight-body"><div class="station"><b>${x.dep}</b><span>SEA · Seattle</span></div><div class="line">2h 30m<i></i>Nonstop study</div><div class="station"><b>${x.arr}</b><span>LAX · Los Angeles</span></div><button type="button" data-id="${x.id}" aria-pressed="${selected===x.id}">${selected===x.id?'Selected sample':'Select this sample'}</button></div></article>`).join('');document.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{selected=button.dataset.id;const x=data.find(x=>x.id===selected);document.querySelector('#selection').textContent=`${x.name} selected: ${x.dep} SEA → ${x.arr} LAX. No booking made.`;render();document.querySelector(`[data-id="${selected}"]`).focus()})}document.querySelector('#period').onchange=()=>{selected='';document.querySelector('#selection').textContent='';render()};render();</script></html>
Рейсы представлены вымышленными фиксированными данными. В примере с нативными компонентами используются свойства auro-flight и ресурсы темы Alaska; этот документ HTML не проверяет наличие мест.
Отображение рейсов нативным компонентом с выбором, реализованным в приложении
Каждому auro-flight передаются даты с часовым смещением, коды станций и массив подписей рейсов в формате JSON. Нативные список выбора и кнопка добавляют локальную фильтрацию и состояние выбора вне компонента отображения.
javascript
// 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}
Кнопка выбора относится к логике приложения, это не выдуманное событие auro-flight.
При смене периода ранее выбранная запись сбрасывается, чтобы скрытый выбор не вводил в заблуждение.
Все номера рейсов, даты и время в примере вымышлены.
04
Настройка агента для дизайн-системы Alaska Airlines Auro
Отправная точка для реализации
Полная точка входа приложения и CSS для существующего проекта Vite без фреймворка. Сохраните установленные версии в файле блокировки проекта. Компиляция нативных компонентов здесь не проверялась; встроенный пример использует независимый офлайн-вариант HTML. В него не включены AS Circular и Good OT.
javascript
// 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}
Запрос для вашего проекта
Промпт для AI-агента
Создайте список рейсов Auro Alaska, явно указав aag-theme-as, CSS токенов Alaska, типографику WCSS и нативные поля auro-flight. Согласуйте смещения ISO и длительность рейсов. Добавьте фильтрацию и выбор на уровне приложения, не придумывая события компонентов; сбрасывайте скрытый выбор и помечайте каждую запись как пример данных.
05
Источники и область применения дизайн-системы Alaska Airlines Auro
Независимый справочник OpenDesign. Все номера рейсов, даты и время вымышлены; реальные расписания авиакомпаний, тарифы, наличие мест и бронирование не представлены. Отступы приложения не выдаются за официальную шкалу токенов.
