# Système de design Alaska Airlines Auro ## Aperçu de l’interface du système de design Alaska Airlines Auro Filtrez deux vols fictifs par période de départ et sélectionnez un exemple, avec un retour clair limité à la session. ## Référence de conception du système de design Alaska Airlines Auro Thème Alaska public actuel CSS et documentation des composants Auro. Dans l’exemple d’origine, l’espacement et les rayons sont explicitement des choix propres à l’application, car l’échelle complète actuelle des primitives n’a pas été vérifiée. Les valeurs historiques d’Auro Classic ne sont pas mêlées à la référence Alaska. ### Rôles sémantiques d’Alaska | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | Rôle de marque principal. | | --ds-basic-color-brand-primary-bold | #00274a | Rôle de marque renforcé. | | --ds-basic-color-brand-primary-muted | #ebf3f9 | Surface de marque atténuée. | | --ds-basic-color-brand-secondary | #5de3f7 | Accent secondaire. | | --ds-basic-color-brand-tertiary | #a3cd6a | Accent tertiaire. | | --ds-basic-color-texticon-default | #2a2a2a | Texte de lecture. | | --ds-basic-color-texticon-muted | #676767 | Texte d’accompagnement. | | --ds-basic-color-border-default | #959595 | Bordure par défaut. | | --ds-basic-color-border-subtle | #dddddd | Séparation discrète. | | --ds-basic-color-status-success | #447a1f | Rôle de réussite. | | --ds-basic-color-status-error | #e31f26 | Rôle d’erreur. | ### États d’action | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | Fond de l’action principale. | | --ds-advanced-color-button-primary-background-hover | #00274a | Fond au survol du pointeur. | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | Fond désactivé. | | --ds-advanced-color-button-primary-text | #ffffff | Texte principal. | | --ds-advanced-color-button-secondary-background | #ffffff | Fond secondaire. | | --ds-advanced-color-button-secondary-border | #01426a | Bordure secondaire. | | --ds-advanced-color-state-focused | #01426a | Rôle de focus. | ### Rôles typographiques d’Alaska | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | Famille du corps de texte. | | --ds-basic-type-family-heading | AS Circular | Famille des titres. | | --ds-basic-type-family-accent | Good OT | Famille d’accentuation. | | --ds-basic-type-line-height-body | 1.625rem | Rôle d’interligne du corps de texte. | | --ds-basic-type-line-height-body2 | 1.5rem | Deuxième rôle du corps de texte. | | --ds-basic-type-line-height-body3 | 1.25rem | Troisième rôle du corps de texte. | | --ds-basic-type-line-height-heading | 1.3 | Rapport d’interligne des titres. | | --ds-basic-type-weight-body | 450 | Graisse du corps de texte. | | --ds-basic-type-weight-heading | 300 | Graisse des titres. | | --ds-basic-type-letter-spacing-accent | 0.05em | Approche de l’accentuation. | ### Sélection du thème | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | Thème Alaska actuel. | | Alaska Classic | aag-theme-asc | Réservé au thème de migration. | | Hawaiian | aag-theme-ha | Thème de marque distinct. | | Atmos | aag-theme-atm | Thème de marque distinct. | | Auro Classic | Deprecated legacy theme | Réservé à la rétrocompatibilité. | ### Composition d’un vol | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | flights | JSON array of flight labels | Exemple ["DEMO 01"]. | | duration | Minutes | Durée de l’exemple d’origine : 150. | | departureTime / arrivalTime | ISO date-time with offset | Ne déduisez pas le fuseau horaire du code de la gare. | | departureStation / arrivalStation | Station codes | Exemples SEA et LAX. | | auro-flightline | Child custom element | Relie la présentation du départ à celle de l’arrivée. | | AuroFlight.register(name) | Custom-name registration | Évitez les collisions entre plusieurs versions. | ## Guide complet du système de design Alaska Airlines Auro Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Alaska Airlines Auro : choisissez explicitement Alaska avant de composer la page ### Les thèmes actuels et les thèmes de migration ne sont pas interchangeables > Auro prend en charge Alaska, Hawaiian et Atmos en tant que thèmes distincts. Alaska Classic conserve d’anciennes valeurs visuelles sous des noms plus récents pour faciliter la migration ; Auro Classic est obsolète. Le fichier fourni importe le fichier Alaska CSS et applique l’attribut aag-theme-as. Une valeur data-aag-theme imbriquée peut changer le thème d’une sous-section. Cette fonctionnalité est utile pour les plateformes partagées, mais ne signifie pas qu’un écran aux couleurs d’Alaska peut emprunter discrètement la typographie Hawaiian ou des valeurs historiques. L’exemple utilise un seul thème cohérent partout. Consultez la spécification associée ## Système de design Alaska Airlines Auro : l’accentuation de la marque diffère du texte de lecture ### Utilisez le rôle sémantique de premier plan La source actuelle des jetons Alaska utilise #2a2a2a pour le texte par défaut et #676767 pour le texte atténué. Le rôle de couleur principale de la marque est #01426a, avec #00274a comme variante renforcée. Ces couleurs remplissent des fonctions différentes, même lorsqu’un titre et un bouton occupent la même zone. L’exemple utilise une typographie neutre foncée pour les informations de vol et le bleu pour mettre en évidence les éléments interactifs. Les accents menthe et cyan figurent dans l’illustration de paysage d’origine, et non comme indicateurs d’état non documentés. Un vol sélectionné est indiqué par le texte et l’état du bouton, ainsi que par sa bordure. Consultez la spécification associée ## Système de design Alaska Airlines Auro : appliquez les classes typographiques prises en charge ### Quatre groupes définissent les usages Le guide typographique actuel d’Auro répartit les styles en quatre groupes : corps de texte, titres, affichage et accentuation. Les styles de titre servent aux titres sémantiques, tandis que les styles d’affichage mettent visuellement en avant du texte qui n’est pas un titre dans la hiérarchie du document. Le guide recommande des classes comme body-default et body-lg plutôt que de recréer toutes les règles typographiques pour chaque élément. La source Alaska indique AS Circular pour le corps de texte et les titres, et Good OT pour le texte d’accentuation. Elle fournit également des rôles distincts pour la graisse et l’interligne. L’aperçu hors ligne utilise la famille de polices de remplacement documentée, sans prétendre que ces polices sont disponibles localement. Consultez la spécification associée ## Système de design Alaska Airlines Auro : le composant de vol représente un itinéraire structuré ### Transmettez les informations horaires sans perdre leur décalage auro-flight combine les informations de départ, d’arrivée et de secteur avec auro-flightline. Son exemple de base accepte un tableau de libellés de vol, une durée en minutes, deux codes de gare et deux dates-heures ISO. Le code fourni conserve les décalages explicites au lieu de transmettre une heure locale ambiguë. Les deux exemples de vol d’origine utilisent les mêmes fuseaux horaires de départ et d’arrivée ; leurs durées de 150 minutes concordent donc avec les horaires indiqués. Il ne s’agit pas de vols réels. Pour un itinéraire avec correspondance en production, il faut également utiliser la représentation des secteurs documentée ; une simple liste de libellés ne doit pas laisser croire qu’une correspondance a été vérifiée. Consultez la spécification associée ## Système de design Alaska Airlines Auro : gérez le choix dans l’application, et non dans les données d’affichage ### Un résultat visible et un résultat sélectionné sont deux états différents L’exemple natif utilise auro-flight pour afficher chaque entrée et un bouton standard pour la sélection locale. Il évite ainsi d’inventer une propriété de sélection API pour le composant d’affichage. L’identifiant sélectionné est géré par l’application et reflété par aria-pressed. La modification du filtre de période de départ efface la sélection et le message. Sans cette étape, l’interface pourrait prétendre qu’une option masquée reste sélectionnée. L’aperçu indique clairement le résultat : un exemple a été choisi uniquement pour cette page, sans effectuer de réservation. 1. Filtrez les entrées d’origine par période de départ. 2. Affichez les autres informations du vol sans en modifier les valeurs. 3. Sélectionnez un exemple visible à l’aide de son identifiant stable. 4. Effacez le choix lorsque le filtre change. Consultez la spécification associée ## Système de design Alaska Airlines Auro : chargez les bases typographiques avec le code des composants ### Les jetons, WCSS et les éléments répondent à des besoins différents Les jetons de design fournissent les valeurs. Les feuilles de style Web Core fournissent les styles de base et les classes typographiques. Le package flight enregistre l’élément personnalisé. Installer un seul de ces éléments ne suffit pas à créer une page entièrement conforme à la marque. WCSS est une base à la carte, et non un fichier source unique regroupant tous les styles possibles. Dans la v12, le chemin Sass est passé de @import à @use et @forward. L’exemple choisit la feuille de style Alaska précompilée documentée, au lieu de mélanger d’anciennes instructions Sass avec la structure actuelle du package. Consultez la spécification associée ## Utilisez de véritables libellés pour les commandes et les états du système de design Alaska Airlines Auro ### Ne faites pas reposer tout le résultat sur la couleur Le filtre est doté d’un libellé visible et chaque action de sélection indique son résultat. Une région d’état annonce par écrit l’échantillon sélectionné. Les lieux de départ et d’arrivée restent compréhensibles sans la ligne décorative ni le paysage. Pour une extension qui recueille des renseignements sur les voyageurs, Auro Input prend en charge les emplacements label et helpText, valide par défaut à la perte de focus et permet de modifier ce comportement avec validateOnInput ou noValidate. Son action d’effacement réinitialise value à undefined. Il faut respecter ces contrats, sans supposer que chaque composant de formulaire renvoie la même valeur vide. - Présentez les heures et les renseignements sur les gares sous forme de texte lisible. - Libellez le filtre indépendamment du nombre de résultats. - Utilisez la région d’état pour annoncer un véritable choix local. - N’affichez pas d’indicateur de chargement pour une mise à jour immédiate de l’état. Consultez la spécification associée ## N’enregistrez des noms alternatifs pour le système de design Alaska Airlines Auro que si plusieurs versions coexistent réellement ### Distinguez une classe de composant de son enregistrement global L’importation standard du package flight enregistre automatiquement auro-flight. Son entrée /class expose AuroFlight pour les appels explicites à register(name), lorsque plusieurs versions doivent utiliser des noms d’éléments personnalisés distincts dans le même document. Un nom personnalisé doit contenir un trait d’union. Cette fonctionnalité sert à gérer les conflits, et non à créer une page normale utilisant une seule version. Conservez le nom par défaut pour l’exemple simple, épinglez les dépendances dans un fichier de verrouillage et examinez les migrations avant de remplacer une version majeure. Les écarts d’aperçu et les rayons d’origine restent des choix propres à l’application ; cette page ne les présente pas comme des primitives Auro vérifiées. Consultez la spécification associée ## Exemples de composants du système de design Alaska Airlines Auro ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation hors ligne HTML d’origine des rôles du thème Alaska et de la hiérarchie des informations de vol. N’inclut ni environnement d’exécution Auro natif, ni polices de marque, ni inventaire en temps réel, ni réservation. ``` 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.

``` Référence du code - Les vols sont des entrées fictives statiques. L’exemple Auro natif fournit les propriétés de auro-flight et les ressources du thème Alaska ; ce document HTML ne consulte pas les disponibilités. ### Affichage natif des vols avec sélection propre à l’application Chaque auro-flight reçoit des dates tenant compte du décalage horaire, des codes de gare et un tableau JSON de libellés de vol. Un menu de sélection natif et un bouton ajoutent un filtrage et un état de sélection locaux, en dehors du composant d’affichage. ``` // 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} ``` Référence du code - Le bouton de sélection relève de la logique de l’application ; il ne s’agit pas d’un événement auro-flight inventé. - Le changement de période efface l’entrée précédemment sélectionnée afin qu’un choix masqué ne puisse pas induire en erreur. - Tous les numéros de vol, dates et heures de l’exemple sont fictifs. ## Configuration de l’agent pour le système de design Alaska Airlines Auro ### Point de départ de l’implémentation Point d’entrée complet de l’application et CSS pour un projet Vite vanilla existant. Conservez les versions installées dans le fichier de verrouillage du projet. La compilation native des composants n’a pas été vérifiée ici ; l’exemple intégré utilise une interprétation hors ligne HTML indépendante. Il n’inclut pas 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} ``` ### Un prompt pour votre projet ``` Composez une liste de vols Auro Alaska avec aag-theme-as, les jetons Alaska CSS, la typographie WCSS et les champs natifs de auro-flight. Veillez à la cohérence des décalages ISO et des durées. Ajoutez le filtrage et la sélection gérés par l’application sans inventer d’événements de composant, effacez les choix masqués et indiquez que chaque entrée est un exemple. ``` ## Sources et périmètre du système de design Alaska Airlines Auro Référence indépendante OpenDesign. Tous les numéros de vol, dates et heures sont fictifs ; aucun horaire, tarif, disponibilité ou service de réservation de compagnie aérienne n’est représenté. Les espacements de l’application ne sont pas présentés comme une échelle officielle de jetons. - Source du thème Alaska Rôles exacts des couleurs et de la typographie actuelles. - Configuration des jetons de design Fichiers de thème, attributs et thèmes de migration. - Fichier de jetons API Formats de fichiers générés et importations. - Présentation de la typographie Groupes typographiques fondés sur des classes. - Feuilles de style Web Core Styles Foundation et migration Sass. - Composant Flight Installation, attributs et enregistrement. - Comportement du composant Input Libellés, effacement et moment de la validation. ## Ressources associées au système de design Alaska Airlines Auro ### Arco Design Créez un sélecteur de sections de rapport avec le composant Transfer contrôlé d’Arco. Découvrez ses véritables échelles d’espacement et de taille, ses conventions de variables CSS, ses surfaces sémantiques et la différence entre sélectionner des lignes et les déplacer. ### Atlassian système de design Créez un tableau de planification des tickets avec les jetons sémantiques Atlassian, une échelle d’espacement de huit pixels, les véritables API de Button, Lozenge et Toggle, ainsi que la configuration de style Compiled requise. Consultez un ticket, filtrez le tableau et déplacez un élément de travail local sans confondre sélection et statut. ### AWS Cloudscape Un guide de configuration Cloudscape avec de véritables jetons de mise à jour visuelle, un espacement adapté à la densité, des API de formulaire contrôlées et un assistant fonctionnel en deux étapes pour la création de ressources. - [Référence de mise en œuvre](https://github.com/AlaskaAirlines/auro-flight) - [Source](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Source](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Source](https://github.com/AlaskaAirlines/auro-flight) - [Consultez la spécification associée](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Consultez la spécification associée](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Consultez la spécification associée](https://auro.alaskaair.com/typography/overview) - [Consultez la spécification associée](https://github.com/AlaskaAirlines/auro-flight) - [Consultez la spécification associée](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Consultez la spécification associée](https://auro.alaskaair.com/components/auro/input) - [Référence du code](https://github.com/AlaskaAirlines/auro-flight) - [Source du thème Alaska Rôles exacts des couleurs et de la typographie actuelles.](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [Configuration des jetons de design Fichiers de thème, attributs et thèmes de migration.](https://github.com/AlaskaAirlines/AuroDesignTokens) - [Fichier de jetons API Formats de fichiers générés et importations.](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [Présentation de la typographie Groupes typographiques fondés sur des classes.](https://auro.alaskaair.com/typography/overview) - [Feuilles de style Web Core Styles Foundation et migration Sass.](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [Composant Flight Installation, attributs et enregistrement.](https://github.com/AlaskaAirlines/auro-flight) - [Comportement du composant Input Libellés, effacement et moment de la validation.](https://auro.alaskaair.com/components/auro/input)