Entdecke Auro’s Alaska-Theme anhand echter semantischer Farb- und Typografie-Tokens, klassenbasierter Typografie und der nativen Flugkomponente. Zwei eigene Flugdaten zeigen lokale Filterung und Auswahl, ohne den Eindruck echter Airline-Angebote oder Buchungen zu erwecken.
Filtern Sie zwei fiktive Flugdaten nach Abflugzeitraum und wählen Sie ein Beispiel aus. Sie erhalten eine klare Rückmeldung, die nur für die Sitzung gilt.
Ursprüngliche Offline-HTML-Interpretation der Rollen des Alaska-Themes und der Hierarchie der Fluginformationen. Keine native Auro-Laufzeitumgebung, Markenschriften, Live-Verfügbarkeit oder Buchung. · Implementierungsreferenz
Aktuelles öffentliches Alaska-Theme-CSS und Dokumentation der Auro-Komponenten. Abstände und Radien des ursprünglichen Beispiels sind ausdrücklich anwendungsspezifische Festlegungen, da eine vollständige aktuelle Primitive-Skala nicht verifiziert wurde. Veraltete Werte aus Auro Classic werden nicht mit der Alaska-Referenz vermischt.
Alaska Airlines Auro-Designsystem: Wählen Sie Alaska explizit aus, bevor Sie die Seite zusammenstellen
Aktuelle und Migrations-Themes sind nicht austauschbar
Auro unterstützt Alaska, Hawaiian und Atmos als separate Themes. Alaska Classic behält ältere visuelle Werte unter neueren Namen für die Migration bei; Auro Classic ist veraltet. Der bereitgestellte Eintrag importiert die Alaska-Datei CSS und wendet das Attribut aag-theme-as an.
Ein verschachtelter data-aag-theme-Wert kann das Theme eines Teilbereichs ändern. Diese Funktion ist für gemeinsam genutzte Plattformen nützlich. Sie bedeutet jedoch nicht, dass eine in Alaska-Farben gestaltete Oberfläche unbemerkt Typografie aus Hawaiian oder ältere Werte übernehmen sollte. Das Beispiel verwendet durchgehend ein einheitliches Theme.
Alaska Airlines Auro-Designsystem: Markenbetonung unterscheidet sich vom Lesetext
Verwenden Sie die semantische Vordergrundrolle
Die aktuelle Alaska-Tokenquelle verwendet #2a2a2a für Standardtext und #676767 für gedämpften Text. Die primäre Markenrolle ist #01426a, ihr kräftigeres Gegenstück #00274a. Diese Werte erfüllen unterschiedliche Aufgaben, auch wenn eine Überschrift und eine Schaltfläche denselben Bereich nutzen.
Das Beispiel verwendet dunkle neutrale Schrift für Fluginformationen und Blau zur interaktiven Hervorhebung. Mint- und Cyan-Akzente finden sich in der ursprünglichen Landschaftsillustration, nicht als undokumentiertes Statussignal. Ein ausgewählter Flug wird sowohl durch Text und Schaltflächenstatus als auch durch seine Umrandung gekennzeichnet.
Auro unterteilt die aktuellen Typografierichtlinien in die Gruppen Body, Heading, Display und Accent. Heading ist für semantische Überschriften vorgesehen, während Display visuell hervorgehobenen Text bezeichnet, der in der Dokumenthierarchie keine Überschrift ist. Die Richtlinien empfehlen Klassen wie body-default und body-lg, statt für jedes Element alle Schriftregeln neu festzulegen.
In der Alaska-Dokumentation werden AS Circular für Fließtext und Überschriften sowie Good OT für Akzenttext genannt. Außerdem sind separate Rollen für Schriftstärke und Zeilenhöhe vorgesehen. Die Offline-Vorschau verwendet die dokumentierte Ersatzschriftfamilie, statt vorzugeben, diese Schriften seien lokal verfügbar.
Alaska Airlines Auro Design-System Die Flugkomponente bildet eine strukturierte Reiseroute ab
Zeitangaben mit Zeitzonenoffset übergeben
auro-flight kombiniert Abflug-, Ankunfts- und Streckeninformationen mit auro-flightline. Im einfachen Beispiel werden ein Array mit Flugbezeichnungen, eine Dauer in Minuten, zwei Stationscodes und zwei ISO-Datumsangaben mit Uhrzeit übergeben. Der Beispielcode bewahrt explizite Offsets, statt mehrdeutige lokale Uhrzeiten zu übergeben.
Die beiden ursprünglichen Beispieldatensätze verwenden dieselben Abflug- und Ankunftszeitzonen, daher stimmen ihre Dauern von 150 Minuten mit den Uhrzeiten überein. Es handelt sich nicht um reale Flüge. Für eine Umsteigeverbindung in einer Produktivumgebung ist außerdem die dokumentierte Streckendarstellung erforderlich. Eine einfache Liste von Bezeichnungen sollte nicht den Eindruck einer bestätigten Verbindung erwecken.
Alaska Airlines Auro Design-System Auswahlentscheidungen der Anwendung nicht in den Anzeigedaten abbilden
Ein sichtbares Ergebnis und ein ausgewähltes Ergebnis sind unterschiedliche Zustände
Im nativen Beispiel zeigt auro-flight jeden Datensatz an. Eine gewöhnliche Schaltfläche übernimmt die lokale Auswahl. So wird kein Auswahl-API in der Anzeigekomponente erfunden. Die Anwendung verwaltet die ausgewählte Kennung und gibt sie über aria-pressed wieder.
Beim Ändern des Abflugzeitfilters werden Auswahl und Meldung zurückgesetzt. Andernfalls könnte die Benutzeroberfläche den Eindruck erwecken, eine ausgeblendete Option sei weiterhin ausgewählt. Die Vorschau macht das Ergebnis deutlich: Die Auswahl gilt nur für diese Seite; eine Buchung wurde nicht vorgenommen.
Die ursprünglichen Datensätze nach Abflugzeitraum filtern.
Die verbleibenden Fluginformationen unverändert darstellen.
Ein sichtbares Beispiel anhand seiner stabilen Kennung auswählen.
Alaska Airlines Auro Design-System Typografische Grundlagen zusammen mit dem Komponentencode laden
Tokens, WCSS und Elemente erfüllen unterschiedliche Aufgaben
Design-Tokens liefern Werte. Web Core Style Sheets liefern grundlegende Stile und Typografieklassen. Das Flugpaket registriert das benutzerdefinierte Element. Nur einen dieser Bereiche einzurichten, ergibt noch keine vollständig markenkonforme Seite.
WCSS ist eine flexibel zusammenstellbare Grundlage und keine einzelne Quelldatei für alle denkbaren Stile. In Version 12 wurde beim Sass-Pfad @import durch @use und @forward ersetzt. Das Beispiel verwendet das dokumentierte, vorkompilierte Alaska-Stylesheet, statt veraltete Sass-Anweisungen mit der aktuellen Paketstruktur zu vermischen.
Alaska Airlines Auro Designsystem Für Steuerelemente und Statusmeldungen aussagekräftige Bezeichnungen verwenden
Das Ergebnis nicht ausschließlich über Farbe vermitteln
Der Filter hat eine sichtbare Beschriftung, und jede Auswahlaktion benennt ihr Ergebnis. Eine Statusregion gibt das ausgewählte Beispiel als Text aus. Abflug und Ankunft bleiben auch ohne Zierlinie oder Landschaft verständlich.
Für eine Erweiterung zur Erfassung von Reisedaten unterstützt Auro Input die Slots label und helpText. Die Validierung erfolgt standardmäßig beim Verlassen des Felds und lässt sich mit validateOnInput oder noValidate anpassen. Beim Löschen wird der Wert auf undefined zurückgesetzt. Diese Vorgaben sollten beachtet werden, statt anzunehmen, jede Formularkomponente liefere denselben Leerwert zurück.
Zeit- und Stationsangaben als lesbaren Text beibehalten.
Den Filter unabhängig von der Ergebnisanzahl beschriften.
Die Statusregion für eine tatsächliche lokale Auswahl verwenden.
Bei einer sofortigen Zustandsänderung keinen ausstehenden Ladevorgang anzeigen.
Alaska Airlines Auro Design-System Alternative Namen nur registrieren, wenn tatsächlich mehrere Versionen parallel verwendet werden
Komponentenklasse und globale Registrierung voneinander trennen
Der Standardimport des Flugpakets registriert auro-flight automatisch. Über den Eintrag /class wird AuroFlight für explizite Aufrufe von register(name) bereitgestellt, wenn mehrere Versionen im selben Dokument unter unterschiedlichen Namen für benutzerdefinierte Elemente verwendet werden müssen. Ein benutzerdefinierter Name muss einen Bindestrich enthalten.
Diese Funktion dient der Konfliktverwaltung und ist für eine gewöhnliche Seite mit nur einer Version nicht erforderlich. Für einfache Beispiele den Standardnamen verwenden, Abhängigkeiten über eine Sperrdatei festschreiben und Migrationen prüfen, bevor eine Hauptversion ersetzt wird. Die ursprünglichen Abstände und Radien der Vorschau bleiben Entscheidungen der Anwendung. Diese Seite weist sie nicht als verifizierte Auro-Grundelemente aus.
Das vollständige Dokument als index.html speichern und in einem Browser öffnen. Ursprüngliche Offline-HTML-Interpretation der Alaska-Themenrollen und der Hierarchie der Fluginformationen. Keine native Auro-Laufzeitumgebung, keine Markenschriften, keine Live-Flugdaten und keine Buchungsmöglichkeit.
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>
Die Flüge sind fiktive, fest vorgegebene Datensätze. Das native Auro-Beispiel verwendet Eigenschaften von auro-flight und Alaska-Themenressourcen. Dieses HTML-Dokument fragt keine Verfügbarkeit ab.
Native Fluganzeige mit ursprünglicher Auswahl durch die Anwendung
Jedes auro-flight erhält Datumsangaben mit Zeitzonenoffset, Stationscodes und ein JSON-Array mit Flugbezeichnungen. Ein natives Auswahlfeld und eine Schaltfläche ergänzen die Anzeige um lokale Filter- und Auswahlzustände, die außerhalb der Anzeigekomponente verwaltet werden.
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}
Vollständiger Anwendungseinstieg und CSS für ein bestehendes Vite-Vanilla-Projekt. Behalte die installierten Versionen in der Projektsperrdatei bei. Die native Kompilierung der Komponenten wurde hier nicht überprüft; das eingebettete Beispiel verwendet ein unabhängiges, offline verfügbares HTML. AS Circular und Good OT sind nicht enthalten.
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}
Ein Prompt für dein Projekt
Agenten-Prompt
Stelle eine Auro Alaska-Flugliste mit explizitem aag-theme-as, Alaska-Token CSS, WCSS-Typografie und nativen auro-flight-Feldern zusammen. Achte auf stimmige ISO-Zeitzonenversätze und Flugdauern. Ergänze anwendungseigene Filter- und Auswahlfunktionen, ohne nicht dokumentierte Komponentenereignisse zu erfinden. Entferne ausgeblendete Auswahlen und kennzeichne jeden Eintrag als Beispieldaten.
05
Quellen und Geltungsbereich des Alaska Airlines Auro-Designsystems
Unabhängige OpenDesign-Referenz. Alle Flugnummern, Datums- und Zeitangaben sind fiktiv; sie stellen keinen Flugplan, Tarif, keine Verfügbarkeit und keine Buchung einer Fluggesellschaft dar. Für den Abstand in der Anwendung wird keine offizielle Token-Skala beansprucht.
