# Sistema de design Alaska Airlines Auro ## Alaska Airlines Auro Prévia da interface do sistema de design Filtre dois registros fictícios de voos pelo período de partida e selecione um exemplo, com um feedback claro, válido apenas durante a sessão. ## Alaska Airlines Auro Referência de design do sistema de design Documentação pública atual do tema Alaska CSS e dos componentes do Auro. O espaçamento e o raio do exemplo original são explicitamente escolhas da aplicação, pois não foi possível verificar uma escala primitiva atual completa. Valores legados do Auro Classic não foram misturados à referência Alaska. ### Funções semânticas do Alaska | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Função de marca principal. | | --ds-basic-color-brand-primary-bold | #00274a | Função de marca intensa. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Superfície de marca atenuada. | | --ds-basic-color-brand-secondary | #5de3f7 | Acento secundário. | | --ds-basic-color-brand-tertiary | #a3cd6a | Acento terciário. | | --ds-basic-color-texticon-default | #2a2a2a | Texto de leitura. | | --ds-basic-color-texticon-muted | #676767 | Texto de apoio. | | --ds-basic-color-border-default | #959595 | Borda padrão. | | --ds-basic-color-border-subtle | #dddddd | Separação sutil. | | --ds-basic-color-status-success | #447a1f | Função de sucesso. | | --ds-basic-color-status-error | #e31f26 | Função de erro. | ### Estados de ação | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Preenchimento da ação principal. | | --ds-advanced-color-button-primary-background-hover | #00274a | Preenchimento ao passar o ponteiro. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Preenchimento desativado. | | --ds-advanced-color-button-primary-text | #ffffff | Texto principal. | | --ds-advanced-color-button-secondary-background | #ffffff | Preenchimento secundário. | | --ds-advanced-color-button-secondary-border | #01426a | Borda secundária. | | --ds-advanced-color-state-focused | #01426a | Função de foco. | ### Funções tipográficas Alaska | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Família tipográfica do corpo. | | --ds-basic-type-family-heading | AS Circular | Família tipográfica dos títulos. | | --ds-basic-type-family-accent | Good OT | Família tipográfica de destaque. | | --ds-basic-type-line-height-body | 1.625rem | Função de altura de linha do corpo. | | --ds-basic-type-line-height-body2 | 1.5rem | Segunda função tipográfica do corpo. | | --ds-basic-type-line-height-body3 | 1.25rem | Terceira função tipográfica do corpo. | | --ds-basic-type-line-height-heading | 1.3 | Proporção de altura de linha dos títulos. | | --ds-basic-type-weight-body | 450 | Peso tipográfico do corpo. | | --ds-basic-type-weight-heading | 300 | Peso tipográfico dos títulos. | | --ds-basic-type-letter-spacing-accent | 0.05em | Espaçamento entre letras dos destaques. | ### Seleção de tema | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Tema Alaska atual. | | Alaska Classic | aag-theme-asc | Somente para migração de tema. | | Hawaiian | aag-theme-ha | Tema de marca separado. | | Atmos | aag-theme-atm | Tema de marca separado. | | Auro Classic | Deprecated legacy theme | Somente para compatibilidade com versões anteriores. | ### Composição do voo | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | flights | JSON array of flight labels | Exemplo ["DEMO 01"]. | | duration | Minutes | Duração da amostra original: 150. | | departureTime / arrivalTime | ISO date-time with offset | Não deduza o fuso horário pelo código da estação. | | departureStation / arrivalStation | Station codes | Exemplo SEA e LAX. | | auro-flightline | Child custom element | Conecta a apresentação da partida à da chegada. | | AuroFlight.register(name) | Custom-name registration | Evite conflitos entre várias versões. | ## Alaska Airlines Auro Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Sistema de design Alaska Airlines Auro: escolha Alaska explicitamente antes de compor a página ### Os temas atual e de migração não são intercambiáveis > Auro oferece Alaska, Hawaiian e Atmos como temas distintos. Alaska Classic mantém valores visuais antigos sob nomes mais recentes para facilitar a migração; Auro Classic está obsoleto. O arquivo de entrada fornecido importa o arquivo Alaska CSS e aplica o atributo aag-theme-as. Um valor data-aag-theme aninhado pode alterar o tema de uma seção. Esse recurso é útil para plataformas compartilhadas, mas não significa que uma tela com as cores de Alaska deva usar discretamente a tipografia Hawaiian ou valores legados. O exemplo mantém um único tema coerente em toda a página. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: a ênfase da marca é diferente do texto de leitura ### Use a função semântica de primeiro plano A fonte atual dos tokens Alaska usa #2a2a2a para o texto padrão e #676767 para o texto atenuado. A função de marca principal é #01426a, e #00274a é sua contraparte mais intensa. Essas funções são diferentes, mesmo quando um título e um botão ocupam a mesma área. O exemplo usa texto em tom neutro escuro para os dados do voo e azul para dar ênfase às interações. Os detalhes em menta e ciano aparecem na ilustração de paisagem original, não como indicadores de status sem documentação. Um voo selecionado é identificado tanto pelo texto e pelo estado do botão quanto pela borda. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: use as classes tipográficas compatíveis ### Quatro grupos expressam diferentes finalidades O guia tipográfico atual da Auro divide os estilos em corpo, títulos, exibição e destaque. Títulos são usados para cabeçalhos semânticos, enquanto exibição serve para textos visualmente proeminentes que não são títulos na hierarquia do documento. O guia recomenda classes como body-default e body-lg, em vez de recriar todas as regras de fonte para cada elemento. A fonte Alaska define AS Circular para o corpo e os títulos, e Good OT para textos de destaque. Ela também fornece funções distintas de peso e altura de linha. A prévia offline usa a família tipográfica alternativa documentada, sem fingir que essas fontes estão disponíveis localmente. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: o componente de voo representa um itinerário estruturado ### Transmita as informações de horário sem descartar o deslocamento UTC auro-flight combina as informações de partida, chegada e trecho com auro-flightline. O exemplo básico aceita um array de identificadores de voo, uma duração em minutos, dois códigos de estação e duas datas e horas no formato ISO. O código fornecido preserva os deslocamentos explícitos, em vez de transmitir um horário local ambíguo. Os dois registros de exemplo originais usam os mesmos fusos horários de partida e chegada, portanto suas durações de 150 minutos são compatíveis com os horários. Eles não correspondem a voos reais. Um itinerário com conexão em produção também precisa da representação de trechos documentada; uma lista simples de identificadores não deve ser usada, sozinha, para indicar uma conexão confirmada. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: mantenha a escolha da aplicação fora dos dados de exibição ### Um resultado visível e um resultado selecionado são estados diferentes O exemplo nativo usa auro-flight para exibir cada registro e um botão comum para a seleção local. Isso evita inventar um API de seleção no componente de exibição. A aplicação controla o identificador selecionado e o reflete por meio de aria-pressed. Ao alterar o filtro de período de partida, a seleção e a mensagem são apagadas. Sem essa etapa, a interface poderia indicar que uma opção oculta continua selecionada. A prévia deixa o resultado explícito: uma amostra foi escolhida somente para esta página, e nenhuma reserva foi feita. 1. Filtre os registros originais pelo período de partida. 2. Exiba os dados restantes do voo sem alterar seus valores. 3. Selecione uma amostra visível pelo identificador estável. 4. Limpe a escolha quando o filtro for alterado. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: carregue os fundamentos tipográficos junto com o código do componente ### Tokens, WCSS e elementos resolvem problemas diferentes Os tokens de design fornecem valores. Web Core Style Sheets fornece estilos fundamentais e classes tipográficas. O pacote de voo registra o elemento personalizado. Instalar apenas um desses recursos não equivale a criar uma página completa com a identidade da marca. WCSS é uma base modular, não um único arquivo-fonte que contenha todos os estilos possíveis. No v12, o caminho Sass migrou de @import para @use e @forward. O exemplo escolhe a folha de estilos Alaska pré-compilada documentada, em vez de misturar instruções Sass antigas com a estrutura atual do pacote. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: use rótulos reais para controles e status ### Não dependa apenas da cor para comunicar o resultado O filtro tem um rótulo visível, e cada ação de seleção informa o resultado. Uma região de status anuncia a amostra selecionada em texto. As informações de partida e chegada continuam compreensíveis sem a linha decorativa ou a paisagem. Em uma extensão que coleta dados de viajantes, Auro Input oferece os slots label e helpText, valida por padrão quando o campo perde o foco e permite alterar esse comportamento com validateOnInput ou noValidate. A ação de limpar redefine o valor como undefined. Respeite esses contratos, em vez de presumir que todo componente de formulário retorna o mesmo valor vazio. - Mantenha as informações de horário e estação em texto legível. - Identifique o filtro com um rótulo separado da contagem de resultados. - Use a região de status para informar uma escolha local real. - Não exiba um indicador de carregamento para uma atualização imediata de estado. Consulte a especificação de apoio ## Sistema de design Alaska Airlines Auro: registre nomes alternativos somente quando as versões realmente coexistirem ### Separe a classe do componente do registro global A importação padrão do pacote de voos registra auro-flight automaticamente. A entrada /class disponibiliza AuroFlight para chamadas explícitas a register(name) quando várias versões precisam de nomes de elementos personalizados distintos no mesmo documento. Um nome personalizado precisa incluir um hífen. Este é um recurso para gerenciar conflitos, não uma exigência para uma página comum com uma única versão. Mantenha o nome padrão no exemplo simples, fixe as dependências por meio de um arquivo de lock e revise as migrações antes de substituir uma versão principal. As lacunas e os raios do preview original continuam sendo decisões da aplicação; esta página não os apresenta como primitivas Auro verificadas. Consulte a especificação de apoio ## Alaska Airlines Auro Exemplos de componentes do sistema de design ### Exemplo interativo completo e independente Salve o documento completo como index.html e abra-o em um navegador. Interpretação original e offline HTML dos papéis do tema Alaska e da hierarquia das informações de voo. Sem runtime nativo do Auro, fontes da marca, inventário em tempo real ou 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.

``` Referência de código - Os voos são registros fictícios e fixos. O exemplo nativo do Auro fornece as propriedades de auro-flight e os recursos do tema Alaska; este documento HTML não consulta a disponibilidade. ### Exibição nativa de voos com seleção original da aplicação Cada auro-flight recebe datas com deslocamento de fuso horário, códigos de estação e um array JSON de rótulos de voo. Um select e um botão nativos adicionam filtragem local e controle da seleção fora do componente de exibição. ``` // 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} ``` Referência de código - O botão de seleção faz parte da lógica da aplicação, não é um evento inventado de auro-flight. - Ao alterar o período, uma seleção anterior é removida para que opções ocultas não induzam ao erro. - Todos os números, as datas e os horários de voo do exemplo são fictícios. ## Alaska Airlines Auro Configuração de agente de IA para sistema de design ### Ponto de partida para implementação Ponto de entrada completo da aplicação e CSS para um projeto Vite vanilla existente. Mantenha as versões instaladas no arquivo de lock do projeto. A compilação nativa dos componentes não foi verificada aqui; o exemplo incorporado usa um HTML independente e offline. AS Circular e Good OT não estão incluídas. ``` // 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} ``` ### Um prompt para seu projeto ``` Monte uma lista de voos Auro Alaska com aag-theme-as explícito, CSS de tokens do Alaska, tipografia WCSS e campos nativos de auro-flight. Mantenha coerentes os deslocamentos ISO e a duração. Adicione filtragem e seleção controladas pela aplicação sem inventar eventos de componente, remova opções ocultas e identifique cada registro como dado de exemplo. ``` ## Alaska Airlines Auro Fontes e escopo do sistema de design Referência independente OpenDesign. Todos os números, as datas e os horários de voo são fictícios; não representam horários, tarifas, disponibilidade ou reservas de uma companhia aérea. O espaçamento da aplicação não é apresentado como uma escala oficial de tokens. - Fonte do tema Alaska Papéis exatos de cores e tipografia atuais. - Configuração de tokens de design Arquivos de tema, atributos e temas de migração. - API de tokens Formatos de arquivo gerados e importações. - Visão geral da tipografia Grupos tipográficos baseados em classes. - Web Core Style Sheets Foundation de estilos e migração do Sass. - Componente de voo Instalação, atributos e registro. - Comportamento de entrada Rótulos, limpeza e momento da validação. ## Alaska Airlines Auro Recursos relacionados ao sistema de design ### Arco Design Crie um seletor de seções de relatório com o componente Transfer controlado da Arco. Explore as escalas reais de espaçamento e tamanho, as convenções de variáveis de CSS, as superfícies semânticas e a diferença entre selecionar linhas e movê-las. ### Atlassian sistema de design Crie um quadro de planejamento de tarefas com tokens semânticos da Atlassian, uma escala de espaçamento de oito pixels, APIs reais de Button, Lozenge e Toggle, além da configuração necessária de estilos Compiled. Inspecione uma tarefa, filtre o quadro e mova um item de trabalho local sem confundir seleção com status. ### AWS Cloudscape Um guia de configuração do Cloudscape com tokens reais de atualização visual, espaçamento adaptado à densidade, APIs controladas para formulários e um assistente funcional de recursos em duas etapas. - [Referência de implementação](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) - [Consulte a especificação de apoio](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Consulte a especificação de apoio](https://auro.alaskaair.com/typography/overview) - [Consulte a especificação de apoio](https://github.com/AlaskaAirlines/auro-flight) - [Consulte a especificação de apoio](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Consulte a especificação de apoio](https://auro.alaskaair.com/components/auro/input) - [Referência de código](https://github.com/AlaskaAirlines/auro-flight) - [Fonte do tema Alaska Papéis exatos de cores e tipografia atuais.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Configuração de tokens de design Arquivos de tema, atributos e temas de migração.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [API de tokens Formatos de arquivo gerados e importações.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Visão geral da tipografia Grupos tipográficos baseados em classes.](https://auro.alaskaair.com/typography/overview) - [Web Core Style Sheets Foundation de estilos e migração do Sass.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Componente de voo Instalação, atributos e registro.](https://github.com/AlaskaAirlines/auro-flight) - [Comportamento de entrada Rótulos, limpeza e momento da validação.](https://auro.alaskaair.com/components/auro/input)