Auro’nun Alaska temasını gerçek anlamsal renk ve yazı belirteçleri, sınıf tabanlı tipografi ve yerel uçuş bileşeniyle keşfedin. Özgün iki uçuş kaydı, havayolu envanterini veya rezervasyonu temsil etmeden yerel filtreleme ve seçimi gösterir.
Alaska temasının rollerini ve uçuş bilgisi hiyerarşisini HTML ile çevrimdışı yorumlayan özgün örnek. Yerel Auro çalışma zamanı, marka yazı tipleri, canlı uçuş envanteri veya rezervasyon içermez. · Uygulama başvurusu
02
Alaska Airlines Auro Tasarım Sistemi Tasarım Referansı
Güncel, herkese açık Alaska teması CSS ve Auro bileşen belgeleri. Güncel temel değerler ölçeğinin tamamı doğrulanmadığından, özgün örnekteki boşluk ve köşe yarıçapı değerleri açıkça uygulamaya özgü tercihler olarak belirtilmiştir. Eski Auro Classic değerleri Alaska referansına karıştırılmamıştır.
Alaska Airlines Auro Tasarım Sistemi Sayfayı oluşturmadan önce Alaska temasını açıkça seçin
Güncel temalar ile geçiş temaları birbirinin yerine kullanılamaz
Auro; Alaska, Hawaiian ve Atmos’u birbirinden ayrı temalar olarak destekler. Alaska Classic, geçiş için daha yeni adların arkasında eski görsel değerleri korur; Auro Classic ise kullanımdan kaldırılmıştır. Sağlanan giriş, Alaska CSS dosyasını içe aktarır ve aag-theme-as özniteliğini uygular.
İç içe yerleştirilmiş bir data-aag-theme değeri, bir alt bölümün temasını değiştirebilir. Bu özellik ortak platformlar için kullanışlıdır; ancak Alaska renkleri kullanılan bir ekranın Hawaiian tipografisini veya eski değerleri sessizce devralması gerektiği anlamına gelmez. Örnek boyunca tek ve tutarlı bir tema kullanılır.
Alaska Airlines Auro Tasarım Sistemi Marka vurgusu, okuma metninden farklıdır
Anlamsal ön plan rolünü kullanın
Güncel Alaska belirteç kaynağında varsayılan metin için #2a2a2a, soluk metin için #676767 kullanılır. Birincil marka rolü #01426a, daha güçlü karşılığı ise #00274a değerindedir. Başlık ile düğme aynı alanda yer alsa bile bunların işlevleri farklıdır.
Örnekte uçuş bilgileri koyu nötr yazıyla, etkileşim vurgusu ise maviyle gösterilir. Nane ve camgöbeği vurguları, belgelenmemiş durum işaretleri olarak değil, özgün manzara illüstrasyonunda kullanılır. Seçilen uçuş, sınırının yanı sıra metin ve düğme durumuyla da belirtilir.
Alaska Airlines Auro Tasarım Sistemi Desteklenen tipografi sınıflarını uygulayın
Dört grup kullanım amacını belirtir
Auro’nun güncel tipografi kılavuzu stilleri gövde, başlık, vitrin ve vurgu olarak gruplandırır. Başlık, anlamsal başlıklar için; vitrin ise belge hiyerarşisinde başlık olmayan, ancak görsel olarak öne çıkan metinler içindir. Kılavuz, yazı tipi kurallarını her öğe için baştan tanımlamak yerine body-default ve body-lg gibi sınıfların kullanılmasını önerir.
Alaska kaynağında gövde ve başlıklar için AS Circular, vurgu metinleri içinse Good OT belirtilir. Ayrıca farklı yazı tipi kalınlığı ve satır yüksekliği rolleri sağlanır. Çevrimdışı önizlemede bu yazı tiplerinin yerel olarak kullanılabildiği izlenimini vermek yerine belgelenmiş yedek yazı tipi ailesi kullanılır.
Alaska Airlines Auro Tasarım Sistemi Uçuş bileşeni, yapılandırılmış bir güzergâhı gösterir
Zaman bilgisini saat dilimi farkını koruyarak iletin
auro-flight, kalkış, varış ve rota bilgilerini auro-flightline ile bir araya getirir. Temel örneği; uçuş etiketlerinden oluşan bir dizi, dakika cinsinden süre, iki istasyon kodu ve ISO biçiminde iki tarih-saat değeri kabul eder. Sağlanan kod, belirsiz bir yerel saat metni kullanmak yerine açık saat dilimi farklarını korur.
Özgün iki örnek kaydın kalkış ve varış saat dilimleri aynıdır; bu nedenle 150 dakikalık süreleri saatlerle tutarlıdır. Bunlar gerçek hizmetler değildir. Üretim ortamındaki bağlantılı bir güzergâhta ayrıca belgelenmiş rota gösterimi gerekir; tek başına düz bir etiket listesi, doğrulanmış bir bağlantı olduğu izlenimini vermek için kullanılmamalıdır.
Alaska Airlines Auro Tasarım Sistemi Uygulama seçimini görüntü verilerinden ayrı tutun
Görüntülenen sonuç ile seçilen sonuç farklı durumlardır
Yerel örnekte her kayıt auro-flight ile gösterilir, yerel seçim içinse standart bir düğme kullanılır. Böylece görüntüleme bileşenine API seçimi gibi bir özellik uydurulmaz. Seçilen tanımlayıcı uygulama tarafından yönetilir ve aria-pressed ile yansıtılır.
Kalkış saati filtresini değiştirmek seçimi ve mesajı temizler. Bu yapılmazsa arayüz, gizlenmiş bir seçeneğin hâlâ seçili olduğunu öne sürebilir. Önizleme sonucu açıkça belirtir: bu sayfa için yalnızca bir örnek seçilmiştir, rezervasyon yapılmamıştır.
Özgün kayıtları kalkış saatine göre filtreleyin.
Kalan uçuş bilgilerini değerlerini değiştirmeden görüntüleyin.
Alaska Airlines Auro Tasarım Sistemi Tipografi temellerini bileşen koduyla birlikte yükleyin
Belirteçler, WCSS ve öğeler farklı ihtiyaçları karşılar
Tasarım belirteçleri değerleri sağlar. Web Core Style Sheets, temel stilleri ve tipografi sınıflarını sağlar. Uçuş paketi özel öğeyi kaydeder. Bu ihtiyaçlardan yalnızca birini yüklemek, markaya uygun eksiksiz bir sayfa oluşturmakla aynı şey değildir.
WCSS, olası tüm stilleri içeren tek bir kaynak dosya değil, ihtiyaca göre seçilebilen bir temeldir. v12’de Sass yolu @import kullanımından @use ve @forward kullanımına geçti. Örnek, eski Sass talimatlarını güncel paket yapısıyla karıştırmak yerine belgelenmiş, önceden derlenmiş Alaska stil sayfasını seçer.
Alaska Airlines Auro tasarım sistemi Denetimler ve durumlar için gerçek etiketler kullanın
Sonucun tamamını renkle anlatmaya çalışmayın
Filtrenin görünür bir etiketi vardır ve her seçim eylemi sonucunu belirtir. Bir durum bölgesi, seçilen örneği metinle duyurur. Kalkış ve varış bilgileri, dekoratif çizgi veya manzara olmadan da anlaşılır.
Yolcu bilgilerini alan bir genişletme için Auro Input, label ve helpText slotlarını destekler; varsayılan olarak bulanıklama olayında doğrulama yapar ve bu zamanlama validateOnInput veya noValidate ile değiştirilebilir. Değer temizlendiğinde undefined olarak sıfırlanır. Bu davranış kurallarına uyulmalı, her form bileşeninin aynı boş değeri döndürdüğü varsayılmamalıdır.
Saat ve istasyon bilgilerini okunabilir metin olarak tutun.
Filtreyi sonuç sayısından bağımsız olarak etiketleyin.
Gerçek bir yerel seçimi duyurmak için durum bölgesini kullanın.
Anlık durum güncellemesi için bekleme göstergesi kullanmayın.
Alaska Airlines Auro Tasarım Sistemi Alternatif adları yalnızca sürümler gerçekten bir arada bulunduğunda kaydedin
Bileşen sınıfını genel kayıttan ayrı tutun
flight paketinin standart içe aktarımı auro-flight öğesini otomatik olarak kaydeder. /class girişi, aynı belgede birden fazla sürümün farklı özel öğe adları kullanması gerektiğinde açık register(name) çağrıları için AuroFlight öğesini sunar. Özel ad tire içermelidir.
Bu, normalde tek sürüm kullanılan sayfalar için bir gereklilik değil, çakışma yönetimi özelliğidir. Basit örnekte varsayılan adı kullanın, bağımlılık sürümlerini bir kilit dosyasıyla sabitleyin ve ana sürümü değiştirmeden önce geçişleri inceleyin. Özgün önizlemedeki boşluklar ve köşe yarıçapları uygulamaya özgü kararlardır; bu sayfa bunları doğrulanmış Auro temel değerleri olarak sunmaz.
Alaska Airlines Auro Tasarım Sistemi Bileşen Örnekleri
Tamamlanmış, bağımsız ve etkileşimli örnek
Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Alaska tema rollerinin ve uçuş bilgisi hiyerarşisinin özgün, çevrimdışı HTML yorumu. Yerel Auro çalışma zamanı, marka yazı tipleri, canlı envanter veya rezervasyon içermez.
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>
Uçuşlar, değişmeyen kurgusal kayıtlardır. Yerel Auro örneğinde auro-flight özellikleri ve Alaska tema varlıkları bulunur; bu HTML belgesi müsaitlik sorgulamaz.
Özgün uygulama seçimiyle yerel uçuş gösterimi
Her auro-flight öğesi, saat dilimi farkını içeren tarihler, istasyon kodları ve JSON uçuş etiketi dizisi alır. Yerel bir select ve düğme, gösterim bileşeninin dışında filtreleme ve seçim durumu ekler.
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}
Seçim düğmesi uygulama mantığıdır; uydurulmuş bir auro-flight olayı değildir.
Dönem değiştirildiğinde önceden seçilmiş kayıt temizlenir; böylece gizli seçimler yanıltıcı olmaz.
Örnekteki tüm uçuş numaraları, tarihler ve saatler kurgusaldır.
04
Alaska Airlines Auro Tasarım Sistemi Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Mevcut bir Vite vanilla projesi için uygulama giriş noktasının tamamı ve CSS. Yüklü sürümleri proje kilit dosyasında sabit tutun. Yerel bileşen derlemesi burada doğrulanmadı; gömülü örnek bağımsız, çevrimdışı HTML kullanır. AS Circular veya Good OT paketlenmez.
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}
Projeniz İçin Bir İstem
Ajan İstemi
Açıkça belirtilmiş aag-theme-as, Alaska belirteci CSS, WCSS tipografisi ve yerel auro-flight alanlarıyla bir Auro Alaska uçuş listesi oluşturun. ISO saat dilimi farklarını ve süreleri tutarlı kullanın. Bileşen olayları uydurmadan uygulamaya ait filtreleme ve seçim ekleyin, gizli seçimleri temizleyin ve her kaydı örnek veri olarak etiketleyin.
05
Alaska Airlines Auro Tasarım Sistemi Kaynakları ve Kapsamı
Bağımsız OpenDesign referansı. Tüm uçuş numaraları, tarihler ve saatler kurgusaldır; herhangi bir hava yolu tarifesi, ücret, müsaitlik veya rezervasyon gösterilmez. Uygulama boşlukları resmî bir belirteç ölçeği olarak sunulmaz.
