# Alaska Airlines Auro Tasarım Sistemi ## Alaska Airlines Auro Tasarım Sistemi Arayüz Önizlemesi Kurgusal iki uçuş kaydını kalkış saatine göre filtreleyin ve bir örnek seçin; yalnızca oturum için geçerli geri bildirim açıkça gösterilir. ## 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 anlamsal rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Birincil marka rolü. | | --ds-basic-color-brand-primary-bold | #00274a | Güçlü marka rolü. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Soluk marka yüzeyi. | | --ds-basic-color-brand-secondary | #5de3f7 | İkincil vurgu. | | --ds-basic-color-brand-tertiary | #a3cd6a | Üçüncül vurgu. | | --ds-basic-color-texticon-default | #2a2a2a | Okuma metni. | | --ds-basic-color-texticon-muted | #676767 | Yardımcı metin. | | --ds-basic-color-border-default | #959595 | Varsayılan sınır. | | --ds-basic-color-border-subtle | #dddddd | İnce ayırıcı. | | --ds-basic-color-status-success | #447a1f | Başarı rolü. | | --ds-basic-color-status-error | #e31f26 | Hata rolü. | ### Eylem durumları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Birincil eylem dolgusu. | | --ds-advanced-color-button-primary-background-hover | #00274a | İşaretçi üzerine geldiğinde dolgu. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Devre dışı dolgu. | | --ds-advanced-color-button-primary-text | #ffffff | Birincil metin. | | --ds-advanced-color-button-secondary-background | #ffffff | İkincil dolgu. | | --ds-advanced-color-button-secondary-border | #01426a | İkincil sınır. | | --ds-advanced-color-state-focused | #01426a | Odak rolü. | ### Alaska tipografi rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Gövde yazı tipi ailesi. | | --ds-basic-type-family-heading | AS Circular | Başlık yazı tipi ailesi. | | --ds-basic-type-family-accent | Good OT | Vurgu yazı tipi ailesi. | | --ds-basic-type-line-height-body | 1.625rem | Gövde satır yüksekliği rolü. | | --ds-basic-type-line-height-body2 | 1.5rem | İkinci gövde rolü. | | --ds-basic-type-line-height-body3 | 1.25rem | Üçüncü gövde rolü. | | --ds-basic-type-line-height-heading | 1.3 | Başlık satır yüksekliği oranı. | | --ds-basic-type-weight-body | 450 | Gövde yazı tipi kalınlığı. | | --ds-basic-type-weight-heading | 300 | Başlık yazı tipi kalınlığı. | | --ds-basic-type-letter-spacing-accent | 0.05em | Vurgu harf aralığı. | ### Tema seçimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Güncel Alaska teması. | | Alaska Classic | aag-theme-asc | Yalnızca geçiş teması. | | Hawaiian | aag-theme-ha | Ayrı marka teması. | | Atmos | aag-theme-atm | Ayrı marka teması. | | Auro Classic | Deprecated legacy theme | Yalnızca geriye dönük uyumluluk. | ### Uçuş bileşimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | flights | JSON array of flight labels | Örnek ["DEMO 01"]. | | duration | Minutes | Özgün örnek süre: 150. | | departureTime / arrivalTime | ISO date-time with offset | İstasyon kodundan saat dilimi çıkarsamayın. | | departureStation / arrivalStation | Station codes | Örnek SEA ve LAX. | | auro-flightline | Child custom element | Kalkış ve varış sunumunu birbirine bağlar. | | AuroFlight.register(name) | Custom-name registration | Birden fazla sürümün çakışmasını önleyin. | ## Alaska Airlines Auro Tasarım Sistemi Kapsamlı Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. Özgün kayıtları kalkış saatine göre filtreleyin. 2. Kalan uçuş bilgilerini değerlerini değiştirmeden görüntüleyin. 3. Görünen bir örneği sabit tanımlayıcısıyla seçin. 4. Filtre değiştiğinde seçimi temizleyin. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. ``` 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.

``` Kod referansı - 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. ``` // 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} ``` Kod referansı - 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. ## 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. ``` // 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} ``` ### Projeniz İçin Bir İstem ``` 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. ``` ## 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. - Alaska tema kaynağı Geçerli renk ve tipografi rollerinin tam karşılıkları. - Tasarım belirteci kurulumu Tema dosyaları, nitelikler ve geçiş temaları. - Belirteç API Oluşturulan dosya biçimleri ve içe aktarımlar. - Tipografi özeti Sınıf tabanlı yazı tipi grupları. - Web Core Style Sheets Foundation stilleri ve Sass geçişi. - Uçuş bileşeni Kurulum, nitelikler ve kayıt. - Girdi davranışı Etiketler, temizleme ve doğrulama zamanlaması. ## Alaska Airlines Auro Tasarım Sistemiyle İlgili Kaynaklar ### Arco Design Arco’nun kontrollü Transfer bileşeniyle bir rapor bölümü seçicisi oluşturun. Gerçek boşluk ve boyut ölçeklerini, CSS değişken adlandırma kurallarını, anlamsal arka plan katmanlarını ve satırları seçmekle taşımak arasındaki farkı keşfedin. ### Atlassian tasarım sistemi Anlamsal Atlassian belirteçleri, sekiz piksellik boşluk ölçeği, gerçek Button, Lozenge ve Toggle API’leri ve gerekli Compiled stil ayarıyla bir iş planlama panosu oluşturun. Bir işi inceleyin, panoyu filtreleyin ve seçimi durumla karıştırmadan yerel bir iş öğesini taşıyın. ### AWS Cloudscape Gerçek görsel yenileme belirteçleri, yoğunluğa duyarlı boşluklar, kontrollü form API’leri ve çalışan iki adımlı kaynak sihirbazı içeren bir Cloudscape yapılandırma kılavuzu. - [Uygulama başvurusu](https://github.com/AlaskaAirlines/auro-flight) - [Kaynak](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Kaynak](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Kaynak](https://github.com/AlaskaAirlines/auro-flight) - [Destekleyici belirtimi okuyun](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Destekleyici belirtimi okuyun](https://auro.alaskaair.com/typography/overview) - [Destekleyici belirtimi okuyun](https://github.com/AlaskaAirlines/auro-flight) - [Destekleyici belirtimi okuyun](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Destekleyici belirtimi okuyun](https://auro.alaskaair.com/components/auro/input) - [Kod referansı](https://github.com/AlaskaAirlines/auro-flight) - [Alaska tema kaynağı Geçerli renk ve tipografi rollerinin tam karşılıkları.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Tasarım belirteci kurulumu Tema dosyaları, nitelikler ve geçiş temaları.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Belirteç API Oluşturulan dosya biçimleri ve içe aktarımlar.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Tipografi özeti Sınıf tabanlı yazı tipi grupları.](https://auro.alaskaair.com/typography/overview) - [Web Core Style Sheets Foundation stilleri ve Sass geçişi.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Uçuş bileşeni Kurulum, nitelikler ve kayıt.](https://github.com/AlaskaAirlines/auro-flight) - [Girdi davranışı Etiketler, temizleme ve doğrulama zamanlaması.](https://auro.alaskaair.com/components/auro/input)