# Дизайн-система Alaska Airlines Auro ## Alaska Airlines Auro Предварительный просмотр интерфейса дизайн-системы Отфильтруйте две вымышленные записи о рейсах по времени вылета и выберите пример. Результат будет явно указан и сохранится только в рамках сеанса. ## Alaska Airlines Auro Справочник по дизайн-системе Текущий общедоступный файл темы Alaska CSS и документация компонентов Auro. Интервалы и скругления в исходном примере явно указаны как решения приложения, поскольку полная актуальная шкала базовых значений не подтверждена. Устаревшие значения Auro Classic не смешиваются со справочником Alaska. ### Семантические роли Alaska | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Основная роль бренда. | | --ds-basic-color-brand-primary-bold | #00274a | Выразительная роль бренда. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Приглушённая поверхность бренда. | | --ds-basic-color-brand-secondary | #5de3f7 | Вторичный акцент. | | --ds-basic-color-brand-tertiary | #a3cd6a | Третичный акцент. | | --ds-basic-color-texticon-default | #2a2a2a | Текст для чтения. | | --ds-basic-color-texticon-muted | #676767 | Вспомогательный текст. | | --ds-basic-color-border-default | #959595 | Граница по умолчанию. | | --ds-basic-color-border-subtle | #dddddd | Ненавязчивое разделение. | | --ds-basic-color-status-success | #447a1f | Роль успешного состояния. | | --ds-basic-color-status-error | #e31f26 | Роль ошибки. | ### Состояния действий | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Заливка основного действия. | | --ds-advanced-color-button-primary-background-hover | #00274a | Заливка при наведении указателя. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Заливка отключённого элемента. | | --ds-advanced-color-button-primary-text | #ffffff | Основной текст. | | --ds-advanced-color-button-secondary-background | #ffffff | Вторичная заливка. | | --ds-advanced-color-button-secondary-border | #01426a | Вторичная граница. | | --ds-advanced-color-state-focused | #01426a | Роль фокуса. | ### Типографические роли Alaska | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Семейство для основного текста. | | --ds-basic-type-family-heading | AS Circular | Семейство для заголовков. | | --ds-basic-type-family-accent | Good OT | Семейство для акцентного текста. | | --ds-basic-type-line-height-body | 1.625rem | Роль межстрочного интервала основного текста. | | --ds-basic-type-line-height-body2 | 1.5rem | Второй стиль основного текста. | | --ds-basic-type-line-height-body3 | 1.25rem | Третий стиль основного текста. | | --ds-basic-type-line-height-heading | 1.3 | Относительный межстрочный интервал заголовка. | | --ds-basic-type-weight-body | 450 | Насыщенность основного текста. | | --ds-basic-type-weight-heading | 300 | Насыщенность заголовка. | | --ds-basic-type-letter-spacing-accent | 0.05em | Межбуквенный интервал акцентного текста. | ### Выбор темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Текущая тема Alaska. | | Alaska Classic | aag-theme-asc | Только тема для миграции. | | Hawaiian | aag-theme-ha | Отдельная тема бренда. | | Atmos | aag-theme-atm | Отдельная тема бренда. | | Auro Classic | Deprecated legacy theme | Только для обратной совместимости. | ### Структура рейса | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | flights | JSON array of flight labels | Пример ["DEMO 01"]. | | duration | Minutes | Длительность исходного примера — 150. | | departureTime / arrivalTime | ISO date-time with offset | Не определяйте часовой пояс по коду станции. | | departureStation / arrivalStation | Station codes | Пример SEA и LAX. | | auro-flightline | Child custom element | Объединяет отображение отправления и прибытия. | | AuroFlight.register(name) | Custom-name registration | Избегайте конфликтов при использовании нескольких версий. | ## Alaska Airlines Auro Полное руководство по дизайн-системе Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система 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. Это разные назначения, даже если заголовок и кнопка расположены в одной области. В примере для фактов о рейсах используется тёмный нейтральный текст, а синий цвет подчёркивает интерактивные элементы. Мятные и голубые акценты показаны в исходной иллюстрации пейзажа, а не используются как недокументированные сигналы состояния. Выбранный рейс выделен текстом и состоянием кнопки, а также границей. Прочитать вспомогательную спецификацию ## Дизайн-система Alaska Airlines Auro. Применяйте поддерживаемые классы типографики ### Четыре группы отражают назначение стилей В актуальном руководстве 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. При изменении фильтра по времени отправления выбор и сообщение сбрасываются. Иначе интерфейс мог бы сообщить, что по-прежнему выбран скрытый вариант. В предварительном просмотре явно указано: пример выбран только для этой страницы, бронирование не выполнялось. 1. Отфильтруйте исходные записи по времени отправления. 2. Отобразите остальные сведения о рейсе без изменения их значений. 3. Выберите отображаемый пример по его постоянному идентификатору. 4. Сбросьте выбор при изменении фильтра. Прочитать вспомогательную спецификацию ## Дизайн-система 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. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-системы Alaska Airlines Auro ### Полноценный автономный интерактивный пример Сохраните весь документ как index.html и откройте его в браузере. Независимая офлайн-интерпретация ролей темы Alaska и иерархии информации о рейсах в HTML. Без собственной среды выполнения Auro, фирменных шрифтов, актуальных данных о наличии мест и бронирования. ``` Original flight choices
JOURNEY EXPLORERIndependent Auro interpretation

A little closer to your next adventure.

Explore two original flight examples and keep a choice for this page session.

``` Справочник по коду - Рейсы представлены вымышленными фиксированными данными. В примере с нативными компонентами используются свойства auro-flight и ресурсы темы Alaska; этот документ HTML не проверяет наличие мест. ### Отображение рейсов нативным компонентом с выбором, реализованным в приложении Каждому auro-flight передаются даты с часовым смещением, коды станций и массив подписей рейсов в формате JSON. Нативные список выбора и кнопка добавляют локальную фильтрацию и состояние выбора вне компонента отображения. ``` // 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=`

Explore sample flights

Original records, not a live schedule or booking service.

`; 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. - При смене периода ранее выбранная запись сбрасывается, чтобы скрытый выбор не вводил в заблуждение. - Все номера рейсов, даты и время в примере вымышлены. ## Настройка агента для дизайн-системы Alaska Airlines Auro ### Отправная точка для реализации Полная точка входа приложения и CSS для существующего проекта Vite без фреймворка. Сохраните установленные версии в файле блокировки проекта. Компиляция нативных компонентов здесь не проверялась; встроенный пример использует независимый офлайн-вариант 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=`

Explore sample flights

Original records, not a live schedule or booking service.

`; 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 Alaska, явно указав aag-theme-as, CSS токенов Alaska, типографику WCSS и нативные поля auro-flight. Согласуйте смещения ISO и длительность рейсов. Добавьте фильтрацию и выбор на уровне приложения, не придумывая события компонентов; сбрасывайте скрытый выбор и помечайте каждую запись как пример данных. ``` ## Источники и область применения дизайн-системы Alaska Airlines Auro Независимый справочник OpenDesign. Все номера рейсов, даты и время вымышлены; реальные расписания авиакомпаний, тарифы, наличие мест и бронирование не представлены. Отступы приложения не выдаются за официальную шкалу токенов. - Источник темы Alaska Точные актуальные роли цветов и типографики. - Настройка дизайн-токенов Файлы тем, атрибуты и темы для миграции. - Дизайн-токены API Форматы генерируемых файлов и импорты. - Обзор типографики Группы типографики на основе классов. - Web Core Style Sheets Стили Foundation и миграция с Sass. - Компонент рейсов Установка, атрибуты и регистрация. - Поведение полей ввода Подписи, очистка и момент проверки. ## Связанные ресурсы дизайн-системы Alaska Airlines Auro ### Arco Design Создайте селектор разделов отчёта с управляемым компонентом Transfer от Arco. Изучите реальные шкалы отступов и размеров, принципы именования переменных CSS, семантические поверхности и различие между выбором строк и их перемещением. ### Atlassian дизайн-система Создайте доску планирования задач с семантическими токенами Atlassian, шкалой отступов с шагом восемь пикселей, реальными API Button, Lozenge и Toggle и необходимой настройкой стилизации Compiled. Откройте задачу, отфильтруйте доску и переместите локальный рабочий элемент, не путая выбор со статусом. ### AWS Cloudscape Руководство по настройке Cloudscape с реальными токенами визуального обновления, плотностью адаптивных отступов, API управляемых форм и работающим двухэтапным мастером настройки ресурса. - [Справочник по реализации](https://github.com/AlaskaAirlines/auro-flight) - [Источник](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Источник](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Источник](https://github.com/AlaskaAirlines/auro-flight) - [Прочитать вспомогательную спецификацию](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Прочитать вспомогательную спецификацию](https://auro.alaskaair.com/typography/overview) - [Прочитать вспомогательную спецификацию](https://github.com/AlaskaAirlines/auro-flight) - [Прочитать вспомогательную спецификацию](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Прочитать вспомогательную спецификацию](https://auro.alaskaair.com/components/auro/input) - [Справочник по коду](https://github.com/AlaskaAirlines/auro-flight) - [Источник темы Alaska Точные актуальные роли цветов и типографики.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Настройка дизайн-токенов Файлы тем, атрибуты и темы для миграции.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Дизайн-токены API Форматы генерируемых файлов и импорты.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Обзор типографики Группы типографики на основе классов.](https://auro.alaskaair.com/typography/overview) - [Web Core Style Sheets Стили Foundation и миграция с Sass.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Компонент рейсов Установка, атрибуты и регистрация.](https://github.com/AlaskaAirlines/auro-flight) - [Поведение полей ввода Подписи, очистка и момент проверки.](https://auro.alaskaair.com/components/auro/input)