# Sistema de diseño Alaska Airlines Auro ## 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. ## 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. ### Roles semánticos de Alaska | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Rol de marca principal. | | --ds-basic-color-brand-primary-bold | #00274a | Rol de marca intenso. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Superficie de marca atenuada. | | --ds-basic-color-brand-secondary | #5de3f7 | Acento secundario. | | --ds-basic-color-brand-tertiary | #a3cd6a | Acento terciario. | | --ds-basic-color-texticon-default | #2a2a2a | Texto de lectura. | | --ds-basic-color-texticon-muted | #676767 | Texto complementario. | | --ds-basic-color-border-default | #959595 | Borde predeterminado. | | --ds-basic-color-border-subtle | #dddddd | Separación sutil. | | --ds-basic-color-status-success | #447a1f | Rol de éxito. | | --ds-basic-color-status-error | #e31f26 | Rol de error. | ### Estados de acción | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Relleno de acción principal. | | --ds-advanced-color-button-primary-background-hover | #00274a | Relleno al pasar el puntero. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Relleno deshabilitado. | | --ds-advanced-color-button-primary-text | #ffffff | Texto principal. | | --ds-advanced-color-button-secondary-background | #ffffff | Relleno secundario. | | --ds-advanced-color-button-secondary-border | #01426a | Borde secundario. | | --ds-advanced-color-state-focused | #01426a | Rol de foco. | ### Roles tipográficos de Alaska | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Familia de texto de cuerpo. | | --ds-basic-type-family-heading | AS Circular | Familia de encabezados. | | --ds-basic-type-family-accent | Good OT | Familia de acento. | | --ds-basic-type-line-height-body | 1.625rem | Rol de interlineado del cuerpo. | | --ds-basic-type-line-height-body2 | 1.5rem | Segundo rol de cuerpo. | | --ds-basic-type-line-height-body3 | 1.25rem | Tercer rol de cuerpo. | | --ds-basic-type-line-height-heading | 1.3 | Proporción de interlineado de encabezados. | | --ds-basic-type-weight-body | 450 | Peso tipográfico del cuerpo. | | --ds-basic-type-weight-heading | 300 | Peso tipográfico de encabezados. | | --ds-basic-type-letter-spacing-accent | 0.05em | Espaciado entre letras del acento. | ### Selección de tema | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Tema actual de Alaska. | | Alaska Classic | aag-theme-asc | Solo tema de migración. | | Hawaiian | aag-theme-ha | Tema de marca independiente. | | Atmos | aag-theme-atm | Tema de marca independiente. | | Auro Classic | Deprecated legacy theme | Solo para compatibilidad con versiones anteriores. | ### Composición del vuelo | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | flights | JSON array of flight labels | Ejemplo ["DEMO 01"]. | | duration | Minutes | Duración de la muestra original: 150. | | departureTime / arrivalTime | ISO date-time with offset | No deduzcas la zona horaria a partir del código de la estación. | | departureStation / arrivalStation | Station codes | Ejemplo SEA y LAX. | | auro-flightline | Child custom element | Conecta la presentación de salida y llegada. | | AuroFlight.register(name) | Custom-name registration | Evita conflictos entre varias versiones. | ## Alaska Airlines Auro Guía completa del sistema de diseño Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Filtra los registros originales por periodo de salida. 2. Muestra los datos restantes del vuelo sin modificar sus valores. 3. Selecciona una muestra visible mediante su identificador estable. 4. Borra la selección al cambiar el filtro. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ``` 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.

``` Referencia de código - 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. ``` // 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} ``` Referencia de código - 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. ## 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. ``` // 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} ``` ### Una instrucción para tu proyecto ``` 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. ``` ## 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. - Fuente del tema de Alaska Roles exactos actuales de color y tipografía. - Configuración de tokens de diseño Archivos de tema, atributos y temas de migración. - API de tokens Formatos de archivo generados e importaciones. - Descripción general de la tipografía Grupos tipográficos basados en clases. - Hojas de estilo web principales Estilos Foundation y migración de Sass. - Componente de vuelo Instalación, atributos y registro. - Comportamiento del campo de entrada Etiquetas, borrado y tiempos de validación. ## Recursos relacionados con Alaska Airlines Auro del sistema de diseño ### Arco Design Crea un selector de secciones de informes con el componente Transfer controlado de Arco. Explora sus escalas reales de espaciado y tamaño, las convenciones de variables de CSS, las superficies semánticas y la diferencia entre seleccionar filas y moverlas. ### Atlassian sistema de diseño Crea un tablero de planificación de incidencias con tokens semánticos de Atlassian, una escala de espaciado de ocho píxeles, las API reales de Button, Lozenge y Toggle, y la configuración de estilos requerida para Compiled. Consulta una incidencia, filtra el tablero y mueve un elemento de trabajo local sin confundir la selección con el estado. ### AWS Cloudscape Una guía de configuración de Cloudscape con tokens reales de actualización visual, espaciado que se adapta a la densidad, API controladas para formularios y un asistente funcional de dos pasos para crear recursos. - [Referencia de implementación](https://github.com/AlaskaAirlines/auro-flight) - [Fuente](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Fuente](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Fuente](https://github.com/AlaskaAirlines/auro-flight) - [Consulta la especificación complementaria](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Consulta la especificación complementaria](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Consulta la especificación complementaria](https://auro.alaskaair.com/typography/overview) - [Consulta la especificación complementaria](https://github.com/AlaskaAirlines/auro-flight) - [Consulta la especificación complementaria](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Consulta la especificación complementaria](https://auro.alaskaair.com/components/auro/input) - [Referencia de código](https://github.com/AlaskaAirlines/auro-flight) - [Fuente del tema de Alaska Roles exactos actuales de color y tipografía.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Configuración de tokens de diseño Archivos de tema, atributos y temas de migración.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [API de tokens Formatos de archivo generados e importaciones.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Descripción general de la tipografía Grupos tipográficos basados en clases.](https://auro.alaskaair.com/typography/overview) - [Hojas de estilo web principales Estilos Foundation y migración de Sass.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Componente de vuelo Instalación, atributos y registro.](https://github.com/AlaskaAirlines/auro-flight) - [Comportamiento del campo de entrada Etiquetas, borrado y tiempos de validación.](https://auro.alaskaair.com/components/auro/input)