# Alaska Airlines Auro 设计系统 ## Alaska Airlines Auro 设计系统界面预览 按出发时段筛选两条虚构航班记录并选择一条样本，反馈仅在当前会话中有效。 ## Alaska Airlines Auro 设计系统设计参考 当前公开的 Alaska 主题 CSS 与 Auro 组件文档。原始样本中的间距与圆角明确属于应用层选择，因为未能核实完整的当前基础尺度。旧版 Auro Classic 的取值不会混入 Alaska 参考。 ### Alaska 语义角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-basic-color-brand-primary | #01426a | 主品牌角色。 | | --ds-basic-color-brand-primary-bold | #00274a | 强品牌角色。 | | --ds-basic-color-brand-primary-muted | #ebf3f9 | 弱化的品牌背景层。 | | --ds-basic-color-brand-secondary | #5de3f7 | 次级强调色。 | | --ds-basic-color-brand-tertiary | #a3cd6a | 三级强调色。 | | --ds-basic-color-texticon-default | #2a2a2a | 正文阅读文本。 | | --ds-basic-color-texticon-muted | #676767 | 辅助性文本。 | | --ds-basic-color-border-default | #959595 | 默认边界。 | | --ds-basic-color-border-subtle | #dddddd | 细微分隔。 | | --ds-basic-color-status-success | #447a1f | 成功角色。 | | --ds-basic-color-status-error | #e31f26 | 错误角色。 | ### 操作状态 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-advanced-color-button-primary-background | #01426a | 主操作填充。 | | --ds-advanced-color-button-primary-background-hover | #00274a | 指针悬停填充。 | | --ds-advanced-color-button-primary-background-disabled | #acc9e2 | 禁用填充。 | | --ds-advanced-color-button-primary-text | #ffffff | 主文本。 | | --ds-advanced-color-button-secondary-background | #ffffff | 次级填充。 | | --ds-advanced-color-button-secondary-border | #01426a | 次级边界。 | | --ds-advanced-color-state-focused | #01426a | 焦点角色。 | ### Alaska 字体角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --ds-basic-type-family-body | AS Circular | 正文字族。 | | --ds-basic-type-family-heading | AS Circular | 标题字族。 | | --ds-basic-type-family-accent | Good OT | 强调字族。 | | --ds-basic-type-line-height-body | 1.625rem | 正文行高角色。 | | --ds-basic-type-line-height-body2 | 1.5rem | 第二个正文角色。 | | --ds-basic-type-line-height-body3 | 1.25rem | 第三个正文角色。 | | --ds-basic-type-line-height-heading | 1.3 | 标题行高比例。 | | --ds-basic-type-weight-body | 450 | 正文字重。 | | --ds-basic-type-weight-heading | 300 | 标题字重。 | | --ds-basic-type-letter-spacing-accent | 0.05em | 强调字距。 | ### 主题选择 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Alaska | data-aag-theme="aag-theme-as" | 当前的 Alaska 主题。 | | Alaska Classic | aag-theme-asc | 仅用于迁移的主题。 | | Hawaiian | aag-theme-ha | 独立的品牌主题。 | | Atmos | aag-theme-atm | 独立的品牌主题。 | | Auro Classic | Deprecated legacy theme | 仅用于向后兼容。 | ### 航班组合 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | flights | JSON array of flight labels | 示例 ["DEMO 01"]。 | | duration | Minutes | 原始样本时长 150。 | | departureTime / arrivalTime | ISO date-time with offset | 不要从站点代码推断时区。 | | departureStation / arrivalStation | Station codes | 示例为 SEA 与 LAX。 | | auro-flightline | Child custom element | 连接出发与到达的展示。 | | AuroFlight.register(name) | Custom-name registration | 避免多个版本发生冲突。 | ## Alaska Airlines Auro 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Alaska Airlines Auro 设计系统 在编排页面之前明确选择 Alaska ### 当前主题与迁移主题不可互换 > Auro 支持 Alaska、Hawaiian 与 Atmos 三种彼此不同的主题。Alaska Classic 以较新的名称保留旧的视觉取值，用于迁移；Auro Classic 已弃用。所提供的条目导入 Alaska 的 CSS 文件并应用 aag-theme-as 属性。 嵌套的 data-aag-theme 取值可以改变某个子区域的主题。该能力对共享平台很有用，但这并不意味着一个采用 Alaska 配色的界面可以悄然借用 Hawaiian 的排版或旧取值。本示例自始至终使用单一的连贯主题。 阅读配套规范 ## Alaska Airlines Auro 设计系统 品牌强调不同于正文阅读文本 ### 使用语义前景角色 当前的 Alaska 令牌源使用 #2a2a2a 作为默认文本色，用 #676767 作为弱化文本色。品牌主角色为 #01426a，并以 #00274a 作为更强的对应色。即便标题与按钮处于同一区域，它们承担的职责也不相同。 本样本对航班事实信息使用深色中性字体，对交互强调使用蓝色。薄荷绿与青色强调色出现在原始风景插图中，而不是当作未记录的状态信号。被选中的航班既通过边界，也通过文本和按钮状态加以标识。 阅读配套规范 ## Alaska Airlines Auro 设计系统 应用受支持的排版类 ### 四组样式表达各自用途 Auro 当前的排版指南将样式划分为正文、标题、展示与强调四组。标题用于语义上的标题，展示则用于在视觉上突出、但在文档层级中并非标题的文本。指南建议使用 body-default、body-lg 之类的类，而不是为每个元素重新构建全部字体规则。 Alaska 源文件指定 AS Circular 用于正文与标题，Good OT 用于强调文本，并提供彼此不同的字重与行高角色。离线预览使用文档记载的回退字族，而不是假装这些字体在本地可用。 阅读配套规范 ## Alaska Airlines Auro 设计系统 航班组件表示结构化的行程 ### 传递时间信息时不要丢弃其偏移量 auro-flight 与 auro-flightline 结合，共同呈现出发、到达与航段信息。其基础示例接受 flight-label 数组、以分钟为单位的时长、两个站点代码以及两个 ISO 日期时间。所提供的代码保留了显式偏移量，而不是传入含义不明的本地时钟字符串。 两条原始样本记录使用相同的出发与到达时区，因此其 150 分钟时长与时间相符。它们并非真实服务。生产环境中的联程行程还需要文档所述的航段表示方式；仅靠扁平的标签列表不应被用来暗示已核实的衔接。 阅读配套规范 ## Alaska Airlines Auro 设计系统 将应用层选择与展示数据分离 ### 可见的结果与选中的结果是不同状态 原生示例使用 auro-flight 展示每条记录，并使用普通按钮完成本地选择。这样就避免了在展示组件上臆造一个选择 API。选中的标识符由应用持有，并通过 aria-pressed 体现。 更改出发时段筛选条件会清除已选内容和提示信息。缺少这一步，界面就可能显示某个已隐藏的选项仍处于选中状态。预览会明确呈现结果：所选样本仅用于本页面，且未进行任何预订。 1. 按出发时段筛选原始记录。 2. 渲染其余航班信息，且不改变其数值。 3. 通过稳定的标识符选择可见样本。 4. 筛选条件变化时清除所选内容。 阅读配套规范 ## Alaska Airlines Auro 设计系统：在加载组件代码的同时加载排版基础 ### 设计令牌、WCSS 与各类元素各自解决不同的问题 设计令牌提供取值；Web Core Style Sheets 提供基础样式与排版类；航班包则负责注册自定义元素。只安装其中某一项，并不等同于一个完整的品牌化页面。 WCSS 是一套可按需取用的基础，而非囊括所有可能样式的单一源文件。其 v12 Sass 路径已从 @import 迁移到 @use 与 @forward。本示例选用文档中说明的预构建 Alaska 样式表，而不是把旧式 Sass 指令与当前包结构混用。 阅读配套规范 ## Alaska Airlines Auro 设计系统：为控件与状态使用真实标签 ### 不要让颜色独自承载全部结果 筛选器带有可见标签，每个选择操作都点明其结果。状态区域会以文字播报所选样本。即便没有装饰线条或风景图，出发与到达信息依然清晰可懂。 对于收集旅客信息的扩展，Auro Input 支持 label 与 helpText 插槽，默认在失焦时校验，并可通过 validateOnInput 或 noValidate 调整校验时机。其清除行为会将 value 重置为 undefined。应遵循这些约定，而不是假定每个表单组件都返回相同的空值。 - 将时间和车站信息保留为可读文本。 - 让筛选器的标签与结果计数彼此独立。 - 将状态区域用于真实的本地选择。 - 即时状态更新时不要显示加载中的旋转指示器。 阅读配套规范 ## Alaska Airlines Auro 设计系统：仅在版本确实共存时注册备用名称 ### 将组件类与全局注册分开 航班包的标准导入会自动注册 auro-flight。其 /class 入口暴露 AuroFlight，供需要显式 register(name) 调用的场景使用，以便多个版本在同一文档上各自使用不同的自定义元素名。自定义名称必须包含连字符。 这是一项冲突管理特性，而非普通单版本页面的必需项。简单示例保留默认名称，通过锁文件固定依赖版本，并在替换主版本前审查迁移事项。原有预览中的间距与圆角仍属于应用层决策；本页面不会把它们重新标注为经验证的 Auro 基础元素。 阅读配套规范 ## Alaska Airlines Auro 设计系统组件示例 ### 完整的独立交互示例 将完整文档保存为 index.html 并在浏览器中打开。原有的离线 HTML 对 Alaska 主题角色与航班信息层级的诠释。不含原生 Auro 运行时、品牌字体、实时库存或预订功能。 ``` 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.

``` 代码参考 - 这些航班是虚构的固定记录。原生 Auro 示例提供 auro-flight 属性与 Alaska 主题资源；本 HTML 文档不查询可用性。 ### 原生航班展示，搭配应用自有的选择逻辑 每个 auro-flight 都会接收带偏移量的日期、车站代码以及 JSON 航班标签数组。原生 select 与 button 在展示组件之外提供本地筛选与选择状态。 ``` // 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} ``` 代码参考 - 选择按钮属于应用逻辑，并非臆造的 auro-flight 事件。 - 更改时段会清除先前选中的记录，以免隐藏的选择产生误导。 - 示例中的每个航班号、日期和时间均为虚构。 ## Alaska Airlines Auro 设计系统：AI Agent 设置 ### 实现起点 为现有的 Vite 原生项目提供完整的应用入口与 CSS。将已安装的版本保留在项目锁文件中。此处未验证原生组件编译；内嵌的示例采用独立的离线 HTML，且不打包 AS Circular 或 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} ``` ### 适用于你项目的提示词 ``` 组合出 Auro Alaska 航班列表，使用显式的 aag-theme-as、Alaska 设计令牌 CSS、WCSS 排版以及原生 auro-flight 字段。保持 ISO 偏移量与时长一致。添加应用自有的筛选与选择逻辑，不臆造组件事件，清除隐藏的选择，并把每条记录标注为示例数据。 ``` ## Alaska Airlines Auro 设计系统：来源与范围 独立的 OpenDesign 参考。所有航班号、日期和时间均为虚构；不代表任何航空公司班期、票价、可用性或预订信息。应用层的间距不作为官方令牌尺度。 - Alaska 主题来源 当前精确的颜色与字体角色。 - 设计令牌设置 主题文件、属性与迁移主题。 - 设计令牌 API 生成的文件格式与导入方式。 - 排版概览 基于类的字体分组。 - Web Core Style Sheets Foundation 样式与 Sass 迁移。 - 航班组件 安装、属性与注册。 - 输入行为 标签、清除与校验时机。 ## Alaska Airlines Auro 设计系统相关资源 ### Arco Design 使用 Arco 的受控 Transfer 组件构建报告章节选择器。探索实际的间距和尺寸比例、CSS 变量约定、语义界面表面，以及选择行与移动行之间的区别。 ### Atlassian 设计系统 使用语义化的 Atlassian 设计令牌、8 像素间距标尺、真实的 Button、Lozenge 与 Toggle API，以及必需的 Compiled 样式配置，构建一块议题规划看板。检视一条议题、筛选看板，并移动本地工作项，同时不把选中与状态混为一谈。 ### AWS Cloudscape 一份 Cloudscape 配置指南，包含真实的可视化刷新令牌、感知密度的间距、受控表单 API，以及可运行的两步资源向导。 - [实现参考](https://github.com/AlaskaAirlines/auro-flight) - [来源](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [来源](https://github.com/AlaskaAirlines/AuroDesignTokens) - [来源](https://github.com/AlaskaAirlines/auro-flight) - [阅读配套规范](https://github.com/AlaskaAirlines/AuroDesignTokens) - [阅读配套规范](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [阅读配套规范](https://auro.alaskaair.com/typography/overview) - [阅读配套规范](https://github.com/AlaskaAirlines/auro-flight) - [阅读配套规范](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [阅读配套规范](https://auro.alaskaair.com/components/auro/input) - [代码参考](https://github.com/AlaskaAirlines/auro-flight) - [Alaska 主题来源 当前精确的颜色与字体角色。](https://raw.githubusercontent.com/AlaskaAirlines/AuroDesignTokens/master/dist/themes/alaska/CSSCustomProperties--alaska.css) - [设计令牌设置 主题文件、属性与迁移主题。](https://github.com/AlaskaAirlines/AuroDesignTokens) - [设计令牌 API 生成的文件格式与导入方式。](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference) - [排版概览 基于类的字体分组。](https://auro.alaskaair.com/typography/overview) - [Web Core Style Sheets Foundation 样式与 Sass 迁移。](https://github.com/AlaskaAirlines/WebCoreStyleSheets) - [航班组件 安装、属性与注册。](https://github.com/AlaskaAirlines/auro-flight) - [输入行为 标签、清除与校验时机。](https://auro.alaskaair.com/components/auro/input)