# Sistema di progettazione Alaska Airlines Auro ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Alaska Airlines Auro Filtra due record di volo fittizi per fascia oraria di partenza e selezionane uno di esempio, con un chiaro riscontro limitato alla sessione. ## Riferimento di progettazione del sistema sistema di design Alaska Airlines Auro Tema Alaska pubblico attuale CSS e documentazione dei componenti Auro. Spaziatura e raggio nell’esempio originale sono esplicitamente scelte applicative, poiché non è stata verificata una scala completa e attuale delle primitive. I valori legacy di Auro Classic non sono combinati con il riferimento Alaska. ### Ruoli semantici Alaska | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Ruolo primario del brand. | | --ds-basic-color-brand-primary-bold | #00274a | Ruolo forte del brand. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Superficie attenuata del brand. | | --ds-basic-color-brand-secondary | #5de3f7 | Accento secondario. | | --ds-basic-color-brand-tertiary | #a3cd6a | Accento terziario. | | --ds-basic-color-texticon-default | #2a2a2a | Testo principale. | | --ds-basic-color-texticon-muted | #676767 | Testo di supporto. | | --ds-basic-color-border-default | #959595 | Bordo predefinito. | | --ds-basic-color-border-subtle | #dddddd | Separazione discreta. | | --ds-basic-color-status-success | #447a1f | Ruolo di successo. | | --ds-basic-color-status-error | #e31f26 | Ruolo di errore. | ### Stati delle azioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Riempimento dell’azione primaria. | | --ds-advanced-color-button-primary-background-hover | #00274a | Riempimento al passaggio del puntatore. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Riempimento disabilitato. | | --ds-advanced-color-button-primary-text | #ffffff | Testo primario. | | --ds-advanced-color-button-secondary-background | #ffffff | Riempimento secondario. | | --ds-advanced-color-button-secondary-border | #01426a | Bordo secondario. | | --ds-advanced-color-state-focused | #01426a | Ruolo di focus. | ### Ruoli tipografici Alaska | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Famiglia del testo del corpo. | | --ds-basic-type-family-heading | AS Circular | Famiglia dei titoli. | | --ds-basic-type-family-accent | Good OT | Famiglia degli accenti. | | --ds-basic-type-line-height-body | 1.625rem | Ruolo dell’interlinea del corpo. | | --ds-basic-type-line-height-body2 | 1.5rem | Secondo ruolo del corpo. | | --ds-basic-type-line-height-body3 | 1.25rem | Terzo ruolo del corpo. | | --ds-basic-type-line-height-heading | 1.3 | Rapporto d’interlinea dei titoli. | | --ds-basic-type-weight-body | 450 | Peso del testo del corpo. | | --ds-basic-type-weight-heading | 300 | Peso dei titoli. | | --ds-basic-type-letter-spacing-accent | 0.05em | Spaziatura delle lettere degli accenti. | ### Selezione del tema | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Tema Alaska attuale. | | Alaska Classic | aag-theme-asc | Solo tema di migrazione. | | Hawaiian | aag-theme-ha | Tema del brand separato. | | Atmos | aag-theme-atm | Tema del brand separato. | | Auro Classic | Deprecated legacy theme | Solo compatibilità con le versioni precedenti. | ### Composizione del volo | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | flights | JSON array of flight labels | Esempio ["DEMO 01"]. | | duration | Minutes | Durata originale dell’esempio: 150. | | departureTime / arrivalTime | ISO date-time with offset | Non dedurre il fuso orario dal codice della stazione. | | departureStation / arrivalStation | Station codes | Esempio SEA e LAX. | | auro-flightline | Child custom element | Collega la presentazione della partenza e dell’arrivo. | | AuroFlight.register(name) | Custom-name registration | Evita conflitti tra versioni multiple. | ## Guida completa al sistema di progettazione sistema di design Alaska Airlines Auro Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di progettazione sistema di design Alaska Airlines Auro — Scegli esplicitamente Alaska prima di comporre la pagina ### I temi attuali e quelli di migrazione non sono intercambiabili > Auro supporta Alaska, Hawaiian e Atmos come temi distinti. Alaska Classic mantiene i valori visivi precedenti sotto nomi più recenti per agevolare la migrazione; Auro Classic è deprecato. La voce fornita importa il file Alaska CSS e applica l’attributo aag-theme-as. Un valore data-aag-theme annidato può cambiare il tema di una sezione. Questa funzionalità è utile per piattaforme condivise, ma non significa che una schermata con i colori Alaska debba adottare senza dichiararlo la tipografia Hawaiian o i valori legacy. L’esempio mantiene un unico tema coerente in tutta l’interfaccia. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — L’enfasi del brand è diversa dal testo di lettura ### Usa il ruolo semantico del primo piano La fonte attuale dei token Alaska usa #2a2a2a per il testo predefinito e #676767 per il testo attenuato. Il ruolo primario del brand è #01426a, mentre #00274a è la variante più intensa. Sono funzioni diverse, anche quando un titolo e un pulsante occupano la stessa area. L’esempio usa caratteri di colore neutro scuro per i dettagli del volo e il blu per evidenziare gli elementi interattivi. Gli accenti menta e ciano compaiono nell’illustrazione originale del paesaggio, non come indicatori di stato non documentati. Il volo selezionato è identificato sia dal testo e dallo stato del pulsante, sia dal bordo. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Applica le classi tipografiche supportate ### Quattro gruppi esprimono funzioni diverse La guida tipografica attuale di Auro suddivide gli stili in corpo, titoli, display e accenti. Lo stile heading è destinato ai titoli semantici, mentre display si usa per testi visivamente prominenti che non sono titoli nella gerarchia del documento. La guida consiglia classi come body-default e body-lg invece di ricreare tutte le regole tipografiche per ogni elemento. La fonte Alaska indica AS Circular per il testo del corpo e i titoli, e Good OT per gli accenti. Fornisce inoltre ruoli distinti per il peso e l’interlinea. L’anteprima offline usa la famiglia di fallback documentata, senza fingere che questi font siano disponibili in locale. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Il componente flight rappresenta un itinerario strutturato ### Trasmetti le informazioni orarie senza perdere l’offset auro-flight combina le informazioni su partenza, arrivo e tratta con auro-flightline. L’esempio di base accetta un array di etichette del volo, una durata in minuti, due codici di stazione e due date e orari ISO. Il codice fornito conserva gli offset espliciti invece di passare una stringa ambigua con l’ora locale. I due record originali di esempio usano gli stessi fusi orari di partenza e arrivo, quindi le durate di 150 minuti corrispondono agli orari indicati. Non si tratta di servizi reali. Un itinerario con coincidenza di produzione richiede anche la rappresentazione della tratta documentata; un semplice elenco di etichette non deve suggerire una coincidenza verificata. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Mantieni la scelta dell’applicazione al di fuori dei dati di visualizzazione ### Un risultato visibile e un risultato selezionato sono stati diversi L’esempio nativo usa auro-flight per visualizzare ogni record e un normale pulsante per la selezione locale. In questo modo non si inventa un’API di selezione API per il componente di visualizzazione. L’applicazione gestisce l’identificatore selezionato e lo riflette tramite aria-pressed. Quando cambia il filtro della fascia oraria di partenza, la selezione e il messaggio vengono cancellati. Senza questo passaggio, l’interfaccia potrebbe indicare che un’opzione nascosta è ancora selezionata. L’anteprima chiarisce l’esito: è stato scelto un esempio solo per questa pagina e non è stata effettuata alcuna prenotazione. 1. Filtra i record originali per fascia oraria di partenza. 2. Visualizza i dettagli rimanenti del volo senza modificarne i valori. 3. Seleziona un esempio visibile tramite il suo identificatore stabile. 4. Cancella la scelta quando cambia il filtro. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Carica i fondamenti tipografici insieme al codice dei componenti ### Token, WCSS ed elementi risolvono problemi diversi I token di progettazione forniscono i valori. Web Core Style Sheets fornisce stili fondamentali e classi tipografiche. Il pacchetto flight registra l’elemento personalizzato. Installare solo uno di questi componenti non equivale a creare una pagina completa con il brand. WCSS è una base modulare, non un unico file sorgente per ogni stile possibile. Con v12, il percorso Sass è passato da @import a @use e @forward. L’esempio sceglie il foglio di stile Alaska precompilato e documentato, invece di combinare vecchie istruzioni Sass con la struttura attuale del pacchetto. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Usa etichette reali per i controlli e lo stato ### Non affidare tutto il risultato al colore Il filtro ha un’etichetta visibile e ogni azione di selezione ne descrive l’esito. Un’area di stato annuncia in testo l’esempio selezionato. Le informazioni su partenza e arrivo restano comprensibili anche senza la linea decorativa o il paesaggio. Per un’estensione che raccoglie i dati dei viaggiatori, Auro Input supporta gli slot label e helpText, convalida per impostazione predefinita alla perdita del focus e consente di cambiare questa tempistica tramite validateOnInput o noValidate. La cancellazione reimposta value a undefined. È necessario rispettare questi comportamenti, senza presumere che ogni componente di un modulo restituisca lo stesso valore vuoto. - Mantieni le informazioni su orari e stazioni come testo leggibile. - Etichetta il filtro separatamente dal conteggio dei risultati. - Usa l’area di stato per comunicare una scelta locale effettiva. - Non mostrare uno spinner di caricamento per un aggiornamento immediato dello stato. Leggi la specifica di supporto ## Sistema di progettazione sistema di design Alaska Airlines Auro — Registra nomi alternativi solo quando coesistono davvero più versioni ### Separa la classe di un componente dalla registrazione globale L’importazione standard del pacchetto dei voli registra automaticamente auro-flight. La voce /class espone AuroFlight per le chiamate esplicite a register(name), quando più versioni richiedono nomi di elementi personalizzati distinti nello stesso documento. Un nome personalizzato deve includere un trattino. Questa funzionalità serve a gestire i conflitti, non è necessaria per una normale pagina con una sola versione. Per l’esempio semplice, mantieni il nome predefinito, blocca le dipendenze tramite un lockfile e verifica le migrazioni prima di sostituire una versione principale. Le lacune e i raggi degli angoli dell’anteprima originale restano decisioni applicative: questa pagina non li presenta come primitive Auro verificate. Leggi la specifica di supporto ## Alaska Airlines Auro Esempi di componenti del sistema di design ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline originale HTML dei ruoli del tema Alaska e della gerarchia delle informazioni di volo. Nessun runtime Auro nativo, font del brand, disponibilità in tempo reale o prenotazione. ``` 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.

``` Riferimento del codice - I voli sono dati fittizi e fissi. L’esempio Auro nativo fornisce le proprietà di auro-flight e le risorse del tema Alaska; questo documento HTML non verifica la disponibilità. ### Visualizzazione nativa dei voli con selezione applicativa originale Ogni auro-flight riceve date con offset, codici delle stazioni e un array JSON di etichette dei voli. Un elemento select e un pulsante nativi aggiungono filtri locali e lo stato della selezione, al di fuori del componente di visualizzazione. ``` // 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} ``` Riferimento del codice - Il pulsante di selezione implementa la logica applicativa, non un evento auro-flight inventato. - Modificare il periodo cancella il record selezionato in precedenza, evitando che selezioni nascoste possano trarre in inganno. - Tutti i numeri dei voli, le date e gli orari dell’esempio sono fittizi. ## Alaska Airlines Auro Configurazione dell’agent per il sistema di design ### Punto di partenza per l’implementazione Punto di ingresso completo dell’applicazione e CSS per un progetto Vite vanilla esistente. Mantieni le versioni installate nel lockfile del progetto. La compilazione dei componenti nativi non è stata verificata qui; l’esempio incorporato usa un’interpretazione offline indipendente HTML. Non include AS Circular né 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} ``` ### Un prompt per il tuo progetto ``` Componi un elenco di voli Auro Alaska con aag-theme-as esplicito, CSS dei token Alaska, tipografia WCSS e campi nativi di auro-flight. Mantieni coerenti gli offset ISO e la durata. Aggiungi filtri e selezione gestiti dall’applicazione senza inventare eventi del componente, cancella le scelte nascoste e indica ogni record come dato di esempio. ``` ## Alaska Airlines Auro Fonti e ambito del sistema di design Riferimento indipendente OpenDesign. Tutti i numeri dei voli, le date e gli orari sono fittizi; non rappresentano orari, tariffe, disponibilità o prenotazioni di una compagnia aerea. La spaziatura dell’applicazione non è presentata come scala ufficiale dei token. - Fonte del tema Alaska Ruoli cromatici e tipografici esatti e aggiornati. - Configurazione dei token di design File dei temi, attributi e temi di migrazione. - API dei token Formati dei file generati e importazioni. - Panoramica della tipografia Gruppi tipografici basati su classi. - Fogli di stile Web Core Stili Foundation e migrazione Sass. - Componente dei voli Installazione, attributi e registrazione. - Comportamento degli input Etichette, cancellazione e tempi di convalida. ## Alaska Airlines Auro Risorse correlate al sistema di design ### Arco Design Crea un selettore delle sezioni di un report con il componente Transfer controllato di Arco. Esplora le scale effettive di spaziatura e dimensioni, le convenzioni delle variabili CSS, le superfici semantiche e la differenza tra selezionare e spostare le righe. ### Atlassian sistema di design Crea una bacheca per la pianificazione delle issue con i token semantici Atlassian, una scala di spaziatura a intervalli di otto pixel, le API reali di Button, Lozenge e Toggle e la configurazione di stile Compiled richiesta. Esamina un’issue, filtra la bacheca e sposta un elemento di lavoro locale senza confondere la selezione con lo stato. ### AWS Cloudscape Una guida alla configurazione di Cloudscape con token reali per l’aggiornamento visivo, spaziatura adattata alla densità, API controllate per i moduli e una procedura guidata funzionante in due passaggi per le risorse. - [Riferimento per l’implementazione](https://github.com/AlaskaAirlines/auro-flight) - [Fonte](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Fonte](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Fonte](https://github.com/AlaskaAirlines/auro-flight) - [Leggi la specifica di supporto](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Leggi la specifica di supporto](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Leggi la specifica di supporto](https://auro.alaskaair.com/typography/overview) - [Leggi la specifica di supporto](https://github.com/AlaskaAirlines/auro-flight) - [Leggi la specifica di supporto](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Leggi la specifica di supporto](https://auro.alaskaair.com/components/auro/input) - [Riferimento del codice](https://github.com/AlaskaAirlines/auro-flight) - [Fonte del tema Alaska Ruoli cromatici e tipografici esatti e aggiornati.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Configurazione dei token di design File dei temi, attributi e temi di migrazione.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [API dei token Formati dei file generati e importazioni.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Panoramica della tipografia Gruppi tipografici basati su classi.](https://auro.alaskaair.com/typography/overview) - [Fogli di stile Web Core Stili Foundation e migrazione Sass.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Componente dei voli Installazione, attributi e registrazione.](https://github.com/AlaskaAirlines/auro-flight) - [Comportamento degli input Etichette, cancellazione e tempi di convalida.](https://auro.alaskaair.com/components/auro/input)