Explora el tema Alaska de Auro con tokens semánticos reales para color y tipografía, tipografía basada en clases y el componente de vuelo nativo. Dos registros de vuelo originales muestran el filtrado y la selección locales, sin representar inventario de aerolíneas ni permitir reservas.
Guía de OpenDesign8 capítulos39 entradas de referenciaGuía de aplicación original
01
Alaska Airlines Auro Vista previa de la interfaz del sistema de diseño
Filtra dos registros de vuelo ficticios por periodo de salida y selecciona uno de muestra, con una indicación clara de que los cambios solo se guardan durante la sesión.
Interpretación original sin conexión HTML de los roles del tema Alaska y la jerarquía de información de vuelos. Sin entorno de ejecución nativo de Auro, fuentes de marca, inventario en directo ni reservas. · Referencia de implementación
02
Sistema de diseño Alaska Airlines Auro Referencia de diseño del sistema
Documentación pública actual del tema Alaska de CSS y de los componentes de Auro. El espaciado y el radio de la muestra original son decisiones explícitas de la aplicación, ya que no se verificó una escala primitiva completa y actual. Los valores heredados de Auro Classic no se mezclan con la referencia de Alaska.
Sistema de diseño Alaska Airlines Auro: elige Alaska explícitamente antes de componer la página
Los temas actual y de migración no son intercambiables
Auro admite Alaska, Hawaiian y Atmos como temas distintos. Alaska Classic conserva valores visuales anteriores bajo nombres nuevos para facilitar la migración; Auro Classic está obsoleto. La entrada proporcionada importa el archivo Alaska CSS y aplica el atributo aag-theme-as.
Un valor anidado de data-aag-theme puede cambiar el tema de una subsección. Esta capacidad resulta útil para plataformas compartidas, pero no significa que una pantalla con los colores de Alaska deba tomar sin aviso la tipografía de Hawaiian ni valores heredados. El ejemplo mantiene un tema coherente en toda la página.
Sistema de diseño Alaska Airlines Auro: el énfasis de marca no es lo mismo que el texto de lectura
Usa el rol semántico de primer plano
La fuente actual de tokens de Alaska usa #2a2a2a para el texto predeterminado y #676767 para el texto atenuado. El rol de marca principal es #01426a, y su equivalente más intenso es #00274a. Tienen funciones distintas, aunque un encabezado y un botón compartan el mismo espacio.
El ejemplo usa texto en un tono neutro oscuro para los datos del vuelo y azul para destacar los elementos interactivos. Los acentos menta y cian aparecen en la ilustración original del paisaje, no como indicadores de estado no documentados. Un vuelo seleccionado se identifica tanto mediante texto y el estado del botón como por su borde.
Sistema de diseño Alaska Airlines Auro: aplica las clases tipográficas compatibles
Cuatro grupos expresan su propósito
La guía tipográfica actual de Auro divide los estilos en cuerpo, encabezados, display y acento. Encabezado se usa para títulos semánticos, mientras que display se reserva para texto visualmente destacado que no es un encabezado en la jerarquía del documento. La guía recomienda clases como body-default y body-lg en lugar de reconstruir las reglas tipográficas para cada elemento.
La fuente de Alaska indica AS Circular para el cuerpo y los encabezados, y Good OT para el texto de acento. También proporciona roles diferenciados de peso e interlineado. La vista previa sin conexión utiliza la familia tipográfica alternativa documentada, en vez de dar a entender que esas fuentes están disponibles localmente.
Sistema de diseño Alaska Airlines Auro: el componente de vuelo representa un itinerario estructurado
Transmite la información horaria sin descartar su desfase
auro-flight combina la información de salida, llegada y tramo con auro-flightline. Su ejemplo básico admite un arreglo de etiquetas de vuelo, una duración en minutos, dos códigos de estación y dos fechas y horas ISO. El código proporcionado conserva los desfases explícitos en lugar de pasar una hora local ambigua.
Los dos registros de muestra originales usan las mismas zonas horarias para la salida y la llegada, por lo que sus duraciones de 150 minutos coinciden con las horas indicadas. No corresponden a servicios reales. Un itinerario de conexión de producción también necesita la representación de tramos documentada; no se debe usar una lista plana de etiquetas para dar a entender que la conexión está confirmada.
Sistema de diseño Alaska Airlines Auro: mantén la elección de la aplicación fuera de los datos de presentación
Un resultado visible y uno seleccionado son estados distintos
El ejemplo nativo usa auro-flight para mostrar cada registro y un botón normal para la selección local. Así se evita inventar una selección API en el componente de presentación. La aplicación controla el identificador seleccionado y lo refleja mediante aria-pressed.
Al cambiar el filtro del periodo de salida, se borran la selección y el mensaje. De no hacerlo, la interfaz podría afirmar que sigue seleccionada una opción oculta. La vista previa deja claro el resultado: se eligió una muestra solo para esta página y no se realizó ninguna reserva.
Filtra los registros originales por periodo de salida.
Muestra los datos restantes del vuelo sin modificar sus valores.
Selecciona una muestra visible mediante su identificador estable.
Sistema de diseño Alaska Airlines Auro: carga las bases tipográficas junto con el código de los componentes
Los tokens, WCSS y los elementos resuelven problemas distintos
Los tokens de diseño proporcionan valores. Web Core Style Sheets proporciona estilos básicos y clases tipográficas. El paquete de vuelos registra el elemento personalizado. Instalar solo uno de estos componentes no equivale a tener una página completa con la identidad de marca aplicada.
WCSS es una base modular, no un único archivo fuente que contenga todos los estilos posibles. En la versión v12, la ruta Sass pasó de @import a @use y @forward. El ejemplo elige la hoja de estilos Alaska precompilada y documentada, en lugar de mezclar instrucciones Sass antiguas con la estructura actual del paquete.
Sistema de diseño Alaska Airlines Auro: usa etiquetas reales para los controles y el estado
No hagas que el color comunique todo el resultado
El filtro tiene una etiqueta visible y cada acción de selección indica su resultado. Una región de estado anuncia en texto la muestra seleccionada. La información de salida y llegada sigue siendo comprensible sin la línea decorativa ni el paisaje.
Para una extensión que recopile datos de los viajeros, Auro Input admite las ranuras label y helpText, valida al perder el foco de forma predeterminada y permite cambiar ese comportamiento con validateOnInput o noValidate. Al borrarlo, el valor se restablece a undefined. Hay que respetar estos contratos en lugar de suponer que todos los componentes de formulario devuelven el mismo valor vacío.
Mantén la información de hora y estación como texto legible.
Etiqueta el filtro por separado del recuento de resultados.
Usa la región de estado para comunicar una elección local real.
No muestres un indicador de carga para una actualización de estado inmediata.
Alaska Airlines Auro del sistema de diseño: registra nombres alternativos solo cuando coexistan realmente varias versiones
Separa una clase de componente del registro global
La importación estándar del paquete de vuelos registra auro-flight automáticamente. Su entrada /class expone AuroFlight para llamadas explícitas a register(name) cuando se necesitan nombres de elementos personalizados distintos para varias versiones en el mismo documento. Un nombre personalizado debe incluir un guion.
Esta función sirve para gestionar conflictos, no es un requisito para una página normal con una sola versión. Conserva el nombre predeterminado en el ejemplo sencillo, fija las dependencias mediante un archivo de bloqueo y revisa las migraciones antes de sustituir una versión principal. Las separaciones y los radios del ejemplo original siguen siendo decisiones de la aplicación; esta página no los presenta como primitivas verificadas de Auro.
Ejemplos de componentes del sistema de diseño Alaska Airlines Auro
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación original sin conexión HTML de los roles del tema de Alaska y la jerarquía de la información de vuelos. Sin entorno de ejecución nativo de Auro, fuentes de marca, inventario en tiempo real ni reservas.
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>
Los vuelos son registros fijos ficticios. El ejemplo nativo de Auro proporciona las propiedades de auro-flight y los recursos del tema de Alaska; este documento HTML no consulta la disponibilidad.
Visualización nativa de vuelos con selección original de la aplicación
Cada auro-flight recibe fechas con su desplazamiento horario, códigos de estación y una matriz JSON de etiquetas de vuelo. Un select nativo y un botón añaden filtrado local y estado de selección fuera del componente de visualización.
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}
El botón de selección contiene lógica de la aplicación; no es un evento inventado de auro-flight.
Al cambiar el periodo, se borra el registro seleccionado anteriormente para evitar que las selecciones ocultas puedan inducir a error.
Todos los números de vuelo, fechas y horas del ejemplo son ficticios.
04
Configuración del agente del sistema de diseño Alaska Airlines Auro
Punto de partida para la implementación
Entrada completa de la aplicación y CSS para un proyecto existente de Vite vanilla. Conserva las versiones instaladas en el archivo de bloqueo del proyecto. La compilación nativa del componente no se verificó aquí; el ejemplo integrado usa una versión independiente sin conexión de HTML. No incluye AS Circular ni Good OT.
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}
Una instrucción para tu proyecto
Instrucción para el agente
Crea una lista de vuelos de Auro Alaska con aag-theme-as explícito, CSS de tokens de Alaska, tipografía WCSS y campos nativos de auro-flight. Mantén coherentes los desplazamientos ISO y la duración. Añade filtrado y selección propios de la aplicación sin inventar eventos del componente, borra las opciones ocultas y etiqueta cada registro como dato de muestra.
05
Fuentes y alcance del sistema de diseño Alaska Airlines Auro
Referencia independiente de OpenDesign. Todos los números de vuelo, fechas y horas son ficticios; no se representa ningún horario, tarifa, disponibilidad ni reserva de una aerolínea. El espaciado de la aplicación no se presenta como una escala oficial de tokens.
