# Alaska Airlines Auro デザインシステム
## Alaska Airlines Auro デザインシステムのインターフェースプレビュー
架空のフライト記録2件を出発時間帯で絞り込み、サンプルを選択できます。フィードバックはセッション内に限られることを明示します。
## Alaska Airlines Auro デザインシステムのデザインリファレンス
現在公開されているAlaskaテーマのCSSとAuroコンポーネントのドキュメントを参照しています。現在のプリミティブの完全なスケールを確認できていないため、元のサンプルの余白と角丸は、アプリケーション側の選択であることを明記しています。Alaskaのリファレンスに、旧Auro Classicの値は混在させていません。
### 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 | 第2のアクセントカラー。 |
| --ds-basic-color-brand-tertiary | #a3cd6a | 第3のアクセントカラー。 |
| --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 | 第2の塗り。 |
| --ds-advanced-color-button-secondary-border | #01426a | 第2の境界線。 |
| --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 | 第2の本文スタイル。 |
| --ds-basic-type-line-height-body3 | 1.25rem | 第3の本文スタイル。 |
| --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のタイポグラフィや旧来の値を暗黙に流用してよいという意味ではありません。この例では、全体を一貫した1つのテーマで統一しています。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：ブランドの強調色と本文テキストは役割が異なる
### セマンティックな前景色の役割を使う
現在のAlaskaのトークンソースでは、標準テキストに#2a2a2a、控えめなテキストに#676767を使用しています。ブランドの主要カラーの役割は#01426a、さらに強い色は#00274aです。それぞれ役割が異なるため、見出しとボタンが同じ領域にあっても使い分けます。
サンプルでは、フライト情報にダークニュートラルの文字色を使い、インタラクションの強調には青を使っています。ミントとシアンのアクセントは元の風景イラストに登場するもので、ドキュメントにないステータス表示としては使っていません。選択中のフライトは、境界線だけでなくテキストとボタンの状態でも示しています。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：サポートされているタイポグラフィクラスを適用する
### 用途に応じた4つのグループ
Auroの現在のタイポグラフィガイドでは、スタイルをbody、heading、display、accentの4つに分けています。headingは意味的な見出しに、displayは文書の階層上は見出しではないものの、視覚的に目立たせるテキストに使います。フォントのルールを要素ごとにすべて組み直すのではなく、body-defaultやbody-lgなどのクラスを使うことを推奨しています。
Alaskaのソースでは、本文と見出しにAS Circular、アクセントテキストにGood OTを指定しています。ウェイトと行の高さの役割もそれぞれ用意されています。オフラインプレビューでは、これらのフォントをローカルで利用できるかのように扱わず、ドキュメントに記載された代替フォントファミリーを使っています。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：フライトコンポーネントは構造化された旅程を表す
### オフセットを保持したまま時刻情報を渡す
auro-flightは、auro-flightlineと組み合わせて出発、到着、区間情報を表示します。基本的な例では、フライトラベルの配列、分単位の所要時間、2つの駅コード、2つのISO形式の日時を受け取ります。提供されたコードでは、曖昧な現地時刻の文字列を渡さず、明示的なオフセットを保持しています。
元のサンプル記録2件は出発地と到着地のタイムゾーンが同じため、150分という所要時間は時刻と一致します。実際のフライトではありません。本番環境で乗り継ぎの旅程を表すには、ドキュメントに記載された区間形式も必要です。確認済みの乗り継ぎを示すために、区間を含まないラベルのリストだけを使わないでください。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：表示データとアプリケーションの選択状態を分ける
### 結果の表示と選択状態は異なる
ネイティブの例ではauro-flightで各記録を表示し、ローカルでの選択には通常のボタンを使っています。これにより、表示コンポーネントに選択用のAPIを独自に持たせずに済みます。選択中のIDはアプリケーション側で管理し、aria-pressedに反映しています。
出発時間帯のフィルターを変更すると、選択状態とメッセージがクリアされます。そうしないと、非表示の選択肢が選択されたままだと誤解させるおそれがあります。プレビューでは結果を明示しています。このページ内でサンプルを選んだだけで、予約は行われていません。
1. 元の記録を出発時間帯で絞り込む。
2. 残ったフライト情報を値を変更せずに表示する。
3. 変わらないIDを使って、表示中のサンプルを選択する。
4. フィルターが変更されたら選択を解除する。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：コンポーネントのコードとともにタイポグラフィの基盤を読み込む
### トークン、WCSS、要素はそれぞれ異なる問題を解決する
デザイントークンは値を提供します。Web Core Style Sheetsは基本スタイルとタイポグラフィ用クラスを提供します。flightパッケージはカスタム要素を登録します。これらのうち一つだけを導入しても、ブランドを反映したページ全体を構成したことにはなりません。
WCSSは、あらゆるスタイルを一つのソースファイルで提供するのではなく、必要なものを選んで使う基盤です。v12ではSassの記述が@importから@useと@forwardに変更されました。この例では、古いSassの手順と現在のパッケージ構成を混在させず、ドキュメントに記載されたビルド済みのAlaskaスタイルシートを選んでいます。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：操作と状態には具体的なラベルを使う
### 色だけですべてを伝えない
フィルターには見えるラベルがあり、選択操作にはそれぞれ結果を示す名前が付いています。ステータス領域では、選択したサンプルをテキストで知らせます。装飾的な線や風景がなくても、出発地と到着地が分かります。
旅行者情報を収集する機能を追加する場合、Auro InputではlabelスロットとhelpTextスロットを利用できます。既定ではフォーカスが外れたときに検証し、validateOnInputまたはnoValidateでタイミングを変更できます。クリア時には値がundefinedにリセットされます。すべてのフォームコンポーネントが同じ空の値を返すと想定せず、こうした仕様に従ってください。
- 時刻と駅の情報は、読みやすいテキストで表示する。
- 結果件数とは別にフィルターにラベルを付ける。
- ステータス領域で、実際に選択された内容を伝える。
- すぐに反映される状態更新に、処理中のスピナーを表示しない。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステム：複数のバージョンが共存する場合に限り、別名を登録する
### コンポーネントクラスとグローバル登録を分ける
flightパッケージを通常どおりインポートすると、auro-flightが自動的に登録されます。/classエントリーではAuroFlightが公開され、同じドキュメント上で複数のバージョンに異なるカスタム要素名が必要な場合、明示的にregister(name)を呼び出せます。カスタム名にはハイフンを含める必要があります。
これは競合を管理するための機能であり、通常の単一バージョンのページには必要ありません。依存関係はロックファイルで固定し、メジャーバージョンを更新する前に移行内容を確認してください。元のプレビューにある余白や角丸は、引き続きアプリケーション側で決める項目です。このページでは、それらを検証済みのAuroプリミティブとして扱いません。
関連する仕様を確認する
## Alaska Airlines Auro デザインシステムのコンポーネント例
### 完全なスタンドアロンのインタラクティブ見本
ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Alaskaテーマの役割とフライト情報の階層を、HTMLとして独自に解釈したオフラインの例です。Auroのネイティブランタイム、ブランドフォント、リアルタイムの空席情報、予約機能は含みません。
```
Original flight choicesJOURNEY EXPLORERIndependent Auro interpretationA little closer to your next adventure.
Explore two original flight examples and keep a choice for this page session.
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 デザインシステム：エージェントのセットアップ
### 実装の出発点
既存の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=`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}
```
### あなたのプロジェクト向けプロンプト
```
明示的なaag-theme-as、AlaskaトークンのCSS、WCSSのタイポグラフィ、ネイティブのauro-flightフィールドを使って、Auro Alaskaのフライト一覧を構成してください。ISO形式のオフセットと所要時間の整合性を保ちます。コンポーネントに存在しないイベントを想定せず、アプリケーション側で絞り込みと選択機能を追加してください。非表示になった選択は解除し、すべてのレコードにサンプルデータであることを示すラベルを付けます。
```
## Alaska Airlines Auro デザインシステムの参照元と対象範囲
独自のOpenDesignリファレンスです。フライト番号、日付、時刻はすべて架空で、航空会社の運航スケジュール、運賃、空席情報、予約を示すものではありません。アプリケーションの余白を公式のトークンスケールとして扱っていません。
- Alaskaテーマの参照元 現行の色とタイポグラフィの正確な役割。
- デザイントークンのセットアップ テーマファイル、属性、移行用テーマ。
- トークンのAPI 生成されるファイル形式とインポート。
- タイポグラフィの概要 クラスベースのタイポグラフィグループ。
- Web Core Style Sheets FoundationのスタイルとSassの移行。
- Flightコンポーネント インストール、属性、登録。
- Inputの動作 ラベル、クリア、検証タイミング。
## Alaska Airlines Auro デザインシステム関連リソース
### Arco Design
Arco の制御された Transfer コンポーネントで、レポートセクションのセレクターを構築します。実際のスペーシングとサイズのスケール、CSS 変数の規約、セマンティックな界面表面、そして行を選択することと移動することの違いを探ります。
### Atlassian デザインシステム
セマンティックな Atlassian トークン、8 ピクセルのスペーシングスケール、実際の Button、Lozenge、Toggle の API、そして必須の Compiled スタイリングのセットアップを使って、課題計画ボードを構築します。課題を検査し、ボードを絞り込み、選択とステータスを混同することなくローカルの作業項目を移動します。
### AWS Cloudscape
実際のビジュアルリフレッシュ用トークン、密度に応じた余白、制御されたフォームのAPI、動作する2段階のリソースウィザードを備えた、Cloudscapeの設定ガイドです。
- [実装リファレンス](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)
- [Flightコンポーネント インストール、属性、登録。](https://github.com/AlaskaAirlines/auro-flight)
- [Inputの動作 ラベル、クリア、検証タイミング。](https://auro.alaskaair.com/components/auro/input)